/* ============================================================
   AlphaBack — design tokens
   ------------------------------------------------------------
   Single source of truth for every page. Linked FIRST, before
   any page stylesheet or inline <style>.

   Do NOT redeclare these values in a page stylesheet — seven
   diverging copies of :root is exactly what this file replaces.
   ============================================================ */

:root {
  color-scheme: dark;

  /* ── Surfaces ───────────────────────────────────────────────
     Alpha-based so the frosted-glass panels keep compositing.
     Over --bg the ramp reads: #0a0a0a #131313 #1f1f1f #2b2b2b.

     FLOATING PANELS: a popover/dropdown/modal must use
       background: linear-gradient(var(--s4), var(--s4)), var(--bg);
     Bare var(--s4) is translucent and lets content bleed through. */
  --bg:   #000000;
  --s1:   rgba(255,255,255,0.040);   /* recessed — tracks, wells, insets     */
  --s2:   rgba(255,255,255,0.075);   /* card resting                          */
  --s3:   rgba(255,255,255,0.120);   /* raised — hover, active                */
  --s4:   rgba(255,255,255,0.170);   /* floating — popover, dropdown, modal   */

  /* Legacy aliases from login.html's dialect. Do not use in new code. */
  --card:  var(--s2);
  --card2: var(--s3);

  /* ── Accent — the ONE interactive colour ────────────────────
     Cold periwinkle. It means "you can touch this": focus rings,
     active nav, links, selection, glass edge lighting.
     Deliberately NOT green, so "interactive" never reads as
     "profit" — those two meanings must stay separable. */
  --accent:      #c8d4ff;
  --accent-rgb:  200,212,255;
  --accent-dim:  rgba(200,212,255,0.13);
  --accent-line: rgba(200,212,255,0.34);

  /* ── Data colour — meaning only, never chrome ───────────────
     These may appear inside charts, metric values and P&L text.
     They may never be a button fill, a border, or a nav state. */
  --brand:     #16c784;
  --brand-rgb: 22,199,132;
  --blo:       rgba(22,199,132,0.08);
  --pos:       #2dd4a0;
  --neg:       #f87171;
  --warn:      #fbbf24;

  /* ── Text ── */
  --text: #f0f0f4;
  --t2:   rgba(240,240,244,0.60);
  --t3:   rgba(240,240,244,0.50);   /* alpha floor for WCAG AA on --bg */
  --t4:   rgba(240,240,244,0.10);   /* faintest — dividers, underlines */
  --icon: rgba(240,240,244,0.32);

  /* ── Borders ── */
  --bdr:  rgba(255,255,255,0.11);
  --bdr2: rgba(255,255,255,0.20);
  --bdr3: rgba(255,255,255,0.30);

  /* ── Form fields ── */
  --field-bg:  rgba(255,255,255,0.035);
  --field-bdr: rgba(255,255,255,0.10);

  /* ── Space (4px base) ───────────────────────────────────────
     Every padding, gap and margin comes from this scale. There
     is no sanctioned exception; if a value is not here, round to
     the nearest step rather than inventing an eleventh. */
  --sp-1:    4px;
  --sp-2:    8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   24px;
  --sp-6:   32px;
  --sp-7:   48px;
  --sp-8:   64px;
  --sp-9:   96px;
  --sp-10: 128px;

  /* ── Layout ── */
  --maxw:       1180px;   /* default content column           */
  --maxw-wide:  1360px;   /* full-bleed sections, app shell    */
  --maxw-prose:   72ch;   /* legal + docs body copy            */
  --gutter:    clamp(20px, 5vw, 40px);
  --section-y: clamp(72px, 9vw, 132px);
  --nav-h:       64px;

  /* ── Radius (was 19 distinct values) ── */
  --r-sm:    6px;    /* chips, badges, icon tiles       */
  --r-md:   10px;    /* inputs, small cards, tiles      */
  --r-lg:   16px;    /* cards, panels, modals           */
  --r-xl:   24px;    /* hero glass slabs                */
  --r-full: 999px;   /* avatars, dots, round pills      */
  /* border-radius: 0 stays sanctioned — the button family only. */

  /* ── Type (was 31 distinct values, incl. half-pixels) ── */
  --fs-0: 10px;   /* data-dense — heatmap cells, table micro-labels, legends */
  --fs-1: 11px;   /* micro — uppercase labels, badges, meta */
  --fs-2: 13px;   /* body-sm — captions, secondary UI       */
  --fs-3: 15px;   /* body — default reading size            */
  --fs-4: 18px;   /* lead, card titles                      */
  --fs-5: 24px;   /* section subheads                       */
  --fs-6: 32px;   /* metric values, page titles             */
  --fs-7: 44px;   /* section heroes                         */
  --fs-hero: clamp(40px, 6vw, 72px);
  /* Never drop a text input below this — iOS Safari zooms the
     viewport on focus under 16px. Sanctioned exception. */
  --fs-input: 16px;

  /* ── Control heights ── */
  --h-sm: 32px;
  --h-md: 40px;
  --h-lg: 48px;

  /* ── Motion ── */
  --ease-spring: cubic-bezier(0.34,1.56,0.64,1);
  --ease-out:    cubic-bezier(0.16,1,0.3,1);
  --dur-fast: 150ms;
  --dur:      200ms;
  --dur-slow: 300ms;

  /* ── Glass ────────────────────────────────────────────────────
     Three tiers by elevation. These only earn their GPU cost
     because something MOVES behind them (see bg3d.js) — over a
     flat fill a backdrop blur is blurring nothing.
     html.lite zeroes all three in one place, below. */
  --glass-1: blur(24px) saturate(180%);   /* nav, topbar        */
  --glass-2: blur(16px) saturate(150%);   /* cards, panels      */
  --glass-3: blur(32px) saturate(200%);   /* modals, popovers   */
  --glass-blur: var(--glass-2);           /* legacy alias — do not use in new code */

  /* The edge is what separates real glass from the Dribbble
     version: a 1px ring lit from the top-left, dying to nothing
     at the bottom-right. Applied via .glass in shell.css. */
  --glass-edge: linear-gradient(145deg,
                  rgba(255,255,255,0.30),
                  rgba(255,255,255,0.05) 42%,
                  rgba(255,255,255,0) 72%);
  --glass-shadow: inset 0 1px 0 rgba(255,255,255,0.12), inset 0 0 0 1px rgba(255,255,255,0.045), 0 24px 48px -18px rgba(0,0,0,0.7);

  --scrim: rgba(0,0,0,0.72);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);

  /* Marketing shell nav — translucent so the 3D field reads through it. */
  --nav-bg: rgba(6,6,8,0.55);

  /* Shared by #shell-topbar and #shell-prompt, and by the fade that masks
     the results area's scroll boundary — they must stay the same colour. */
  --chrome-bg: rgba(17,17,17,0.97);

  --chat-font: 'DM Sans', sans-serif;
}

/* ── Light theme (opt-in via Settings → Appearance) ── */
:root[data-theme="light"] {
  color-scheme: light;
  --bg:    #f5f6f8;
  --s1:    rgba(10,12,16,0.030);
  --s2:    rgba(10,12,16,0.055);
  --s3:    rgba(10,12,16,0.085);
  --s4:    rgba(10,12,16,0.120);
  --accent:      #4a5cd0;
  --accent-rgb:  74,92,208;
  --accent-dim:  rgba(74,92,208,0.10);
  --accent-line: rgba(74,92,208,0.30);
  --brand: #0ea371;
  --blo:   rgba(14,163,113,0.10);
  --text:  #0d0f13;
  --t2:    rgba(13,15,19,0.74);
  --t3:    rgba(13,15,19,0.60);
  --t4:    rgba(13,15,19,0.10);
  --icon:  rgba(13,15,19,0.42);
  --bdr:   rgba(10,12,16,0.12);
  --bdr2:  rgba(10,12,16,0.22);
  --bdr3:  rgba(10,12,16,0.32);
  --field-bg:  rgba(10,12,16,0.025);
  --field-bdr: rgba(10,12,16,0.10);
  --pos:   #0f9d6b;
  --neg:   #e0483d;
  --warn:  #b45309;
  --nav-bg:    rgba(250,251,253,0.62);
  --chrome-bg: rgba(247,248,250,0.97);
  --scrim: rgba(20,22,28,0.42);
  --glass-edge: linear-gradient(145deg,
                  rgba(255,255,255,0.90),
                  rgba(255,255,255,0.30) 42%,
                  rgba(255,255,255,0) 72%);
  --glass-shadow: inset 0 1px 0 rgba(255,255,255,0.65), inset 0 0 0 1px rgba(10,12,16,0.04), 0 24px 48px -18px rgba(10,12,16,0.16);
}

/* ── Lite mode: one place kills every backdrop-filter site-wide ──
   Set by the pre-paint probe in shell.js on weak hardware, or by
   ?lite=1 / localStorage.ab_perf. Depth still reads from the glass
   edge ring, borders and --glass-shadow. */
html.lite {
  --glass-1: none;
  --glass-2: none;
  --glass-3: none;
  --glass-blur: none;
}

/* Respect reduced motion (Settings toggle, or OS preference) */
:root[data-motion="off"] *,
:root[data-motion="off"] *::before,
:root[data-motion="off"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}

/* ============================================================
   Button family — one primary, site-wide.
   White on sharp corners; colour is reserved for meaning.
   ============================================================ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  height: var(--h-md); padding: 0 18px;
  border: none; border-radius: 0; cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  font-size: var(--fs-2); font-weight: 600; letter-spacing: -0.01em;
  white-space: nowrap; text-decoration: none;
  transition: transform var(--dur) var(--ease-spring),
              box-shadow var(--dur) ease,
              background var(--dur) ease,
              color var(--dur) ease;
}
.btn:active { transform: scale(0.98); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.btn-primary {
  background: #ffffff; color: #0a0a0a;
  box-shadow: 0 4px 12px rgba(255,255,255,0.05);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(255,255,255,0.18);
}

.btn-secondary {
  background: var(--s2); color: var(--text);
  box-shadow: inset 0 0 0 1px var(--bdr);
}
.btn-secondary:hover { background: var(--s3); }

.btn-ghost { background: none; color: var(--t2); box-shadow: inset 0 0 0 1px var(--bdr); }
.btn-ghost:hover { background: var(--s2); color: var(--text); }

.btn-danger { background: var(--neg); color: #1a0505; }
.btn-danger:hover { transform: translateY(-1px); filter: brightness(1.06); }

.btn-sm { height: var(--h-sm); padding: 0 14px; font-size: var(--fs-1); }
.btn-lg { height: var(--h-lg); padding: 0 var(--sp-5); font-size: var(--fs-3); }