/* Theme tokens and global document base.
 * Split from /static/portal.css. Keep portal.css as the ordered entrypoint.
 */

/* Magical Wardrobe — partner portal
 * Theme tokens lifted from the design mock (Ember by default), with two
 * extra layout layers (sidebar/tab-bar shell, panel cards) the mock didn't
 * have. Mobile-first; desktop kicks in at 720px.
 */

:root {
  /* Violet / purple — default partner theme. */
  --hue: 295;
  --accent: oklch(0.72 0.17 var(--hue));
  --accent-soft: oklch(0.72 0.17 var(--hue) / 0.18);
  --accent-glow: oklch(0.72 0.17 var(--hue) / 0.40);
  --accent-ink: oklch(0.16 0.05 var(--hue));
  --on-accent: #fff;
  --stage-bg: #000;

  --bg: oklch(0.155 0.012 var(--hue));
  --bg-2: oklch(0.19 0.013 var(--hue));
  --surface: oklch(0.215 0.014 var(--hue));
  --surface-2: oklch(0.25 0.015 var(--hue));
  --surface-3: oklch(0.30 0.016 var(--hue));
  --hairline: oklch(1 0 0 / 0.10);
  --hairline-strong: oklch(1 0 0 / 0.18);

  --ink: oklch(0.97 0.008 var(--hue));
  --ink-2: oklch(0.78 0.012 var(--hue));
  --ink-3: oklch(0.67 0.014 var(--hue));
  --ink-4: oklch(0.55 0.014 var(--hue));

  --ok: oklch(0.78 0.14 155);
  --warn: oklch(0.82 0.15 85);
  --danger: oklch(0.68 0.20 25);
  --danger-soft: oklch(0.68 0.20 25 / 0.14);
  --offline: oklch(0.55 0.01 var(--hue));

  /* Ring / graph tokens — dark by default (white with alpha on dark bg) */
  --ring-track: oklch(1 0 0 / 0.10);
  --ring-bg: oklch(1 0 0 / 0.06);
  --graph-grid: oklch(1 0 0 / 0.06);

  --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --r-1: 8px; --r-2: 12px; --r-3: 16px; --r-4: 24px; --r-pill: 999px;

  /* Layout */
  --shell-pad: 16px;
  --sidebar-w: 220px;
  --tabbar-h: 64px;
  /* Stopbar total height. Computed once from CSS constants + the iOS
   * safe-area inset so the tabbar's `bottom: var(--stop-h)` is correct
   * at every paint — no DOM measurement, no scroll-driven drift. The
   * compact-mobile and standalone-PWA overrides below tune just the
   * numbers; the formula stays the same.
   *   Lock FAB drives the row height (44px circle); other pills come in
   *   shorter and center themselves. Stopbar own padding-y = 8 × 2 = 16.
   *   total chrome = 60px, plus the bottom safe area. */
  --stop-h: calc(60px + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 719px) {
  :root {
    --shell-pad: 14px;
    --tabbar-h: 56px;
  }
}

@media (max-width: 619px) {
  :root {
    /* Compact mobile: stopbar padding 7px + 2px = 9px, button row is now
     * driven by the 44px Lock FAB (the other pills are ~38px tall). 9 + 44
     * = 53px; bump to 56 for layout slack. */
    --stop-h: calc(56px + env(safe-area-inset-bottom, 0px));
  }
}

[data-theme="ember"]    { --hue: 28; }
[data-theme="velvet"]   { --hue: 330; }
[data-theme="midnight"] { --hue: 240; }

/* Light theme — white surfaces with purple accents.
 * All values live here so the palette is easy to retune (e.g. dim/lavender
 * variant) without touching the rest of the stylesheet. */
[data-theme="light"] {
  --hue: 295;

  --accent:        oklch(0.55 0.18 var(--hue));
  --accent-soft:   oklch(0.55 0.18 var(--hue) / 0.12);
  --accent-glow:   oklch(0.55 0.18 var(--hue) / 0.28);
  --accent-ink:    oklch(0.99 0.005 var(--hue));
  --on-accent:     #fff;

  --bg:            oklch(0.99 0.005 var(--hue));
  --bg-2:          oklch(0.97 0.010 var(--hue));
  --surface:       oklch(0.99 0.005 var(--hue));
  --surface-2:     oklch(0.94 0.012 var(--hue));
  --surface-3:     oklch(0.88 0.016 var(--hue));
  --hairline:        oklch(0 0 0 / 0.13);
  --hairline-strong: oklch(0 0 0 / 0.22);

  --ink:   oklch(0.18 0.020 var(--hue));
  --ink-2: oklch(0.32 0.018 var(--hue));
  --ink-3: oklch(0.44 0.014 var(--hue));
  --ink-4: oklch(0.58 0.010 var(--hue));

  --ok:      oklch(0.48 0.20 155);
  --warn:    oklch(0.68 0.22 90);
  --danger:  oklch(0.50 0.23 25);
  --danger-soft: oklch(0.50 0.23 25 / 0.12);
  --offline: oklch(0.65 0.01 var(--hue));

  --ok-glow:   oklch(0.55 0.20 155 / 0.30);
  --warn-glow: oklch(0.72 0.22 90 / 0.30);
  --err-glow:  oklch(0.57 0.23 25 / 0.28);

  --stage-bg: oklch(0.92 0.014 var(--hue));

  /* Ring / graph — dark-on-light (black with alpha) */
  --ring-track: oklch(0 0 0 / 0.12);
  --ring-bg: oklch(0 0 0 / 0.08);
  --graph-grid: oklch(0 0 0 / 0.08);
}

[data-theme="light"] .card-btn:disabled,
[data-theme="light"] button:disabled {
  opacity: 0.42;
  filter: grayscale(0.4);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100%; overflow-x: clip; }

body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior-x: none;
}

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: var(--accent); text-decoration: none; }