/* App design tokens, shared by every page (see design.md).
   Dark-first: dark values on :root, light values under the system media
   query and the explicit [data-theme="light"] override (the inline <head>
   script on each page applies a saved explicit choice before first paint).

   Token *names* predate the the rebrand (--paper, --ink, --copper…)
   and are kept because every page's CSS already references them by name;
   only the values changed. Read them as roles, not colours:
     --paper   page background          --ink      primary text
     --card    solid panel              --ink-soft secondary text
     --surface raised panel / inputs    --slate    muted text
     --copper  primary accent (gold)    --gold     money / score accent
   New in the rebrand: --teal, --ember, --good, --bad, --spectrum (teal ->
   gold -> ember, kept for money, scores and the verdict), --cta (the
   gold -> ember primary button fill) and the --glow-* pools behind every
   page. */

:root{
  --paper:        #090a0d;
  --card:         #121419;
  --surface:      #171a20;
  --ink:          #f4f1e9;
  --ink-soft:     #d3cfc4;
  --slate:        #a9a69b;
  --line:         #2c2e34;
  --line-soft:    #1f2126;
  --copper:       #f2b84b;
  --copper-strong:#ffc966;
  --copper-soft:  #2a2315;
  --gold:         #f2b84b;
  --teal:         #3ccfb4;
  --ember:        #ff8a4c;
  --good:         #7ad98d;
  --bad:          #ff7066;
  --spectrum:     linear-gradient(100deg,#3ccfb4 0%,#f2b84b 52%,#ff8a4c 100%);
  --cta:          linear-gradient(100deg,#f7c766,#ff9a5a);
  --cta-shadow:   0 8px 26px -10px rgba(255,160,80,.7);
  --glow-gold:    rgba(242,184,75,.26);
  --glow-ember:   rgba(255,138,76,.17);
  --glow-teal:    rgba(60,207,180,.17);
  --field:        .35;
  --hatch: repeating-linear-gradient(135deg, #24262c 0 3px, transparent 3px 7px);

  --disp: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --body: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* 4pt spacing scale */
  --space-3xs: 0.25rem;  --space-2xs: 0.5rem;  --space-xs: 0.75rem;
  --space-sm:  1rem;     --space-md:  1.5rem;  --space-lg: 2rem;
  --space-xl:  3rem;     --space-2xl: 4.5rem;  --space-3xl: 7rem;

  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 22px; --radius-pill: 999px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms;

  --text-display: clamp(2.5rem, 6vw + 1rem, 5rem);

  /* Kept for any old rule still reading them; the hero is themed now. */
  --marquee-bg: var(--paper); --marquee-fg: var(--ink); --marquee-accent: var(--gold);

  /* Focus glow on the one active input, and the one-shot glow on a verdict
     that just resolved to a good hunch. Gold, like everything that "lights". */
  --lamp-ring: 0 0 0 1px color-mix(in srgb, var(--copper) 60%, transparent),
               0 0 0 5px color-mix(in srgb, var(--copper) 14%, transparent),
               0 10px 30px -8px color-mix(in srgb, var(--copper) 40%, transparent);
  --fluoresce-ring: 0 0 0 1px color-mix(in srgb, var(--copper) 55%, transparent),
                    0 12px 40px -6px color-mix(in srgb, var(--copper) 50%, transparent);
  --tint-copper: color-mix(in srgb, var(--copper) 7%, var(--card));

  /* Text on a solid --copper / --gold / --cta fill. */
  --on-copper: #1a1204;
  --on-gold:   #1a1204;
  /* Gold as TEXT (internal-only markers, paid-tool markers). */
  --gold-ink:  #f2b84b;
  color-scheme: dark;
}

@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --paper:#f5f6f4; --card:#ffffff; --surface:#fafaf8;
    --ink:#16181c; --ink-soft:#3d4046; --slate:#5a5d63;
    --line:#d8dad4; --line-soft:#e8e9e5;
    --copper:#a8600f; --copper-strong:#8c4f0c; --copper-soft:#f6ead2;
    --gold:#c98a1a; --teal:#11907b; --ember:#d0602a; --good:#2f9a4f; --bad:#cf3b30;
    --spectrum:linear-gradient(100deg,#17a58c 0%,#d6981f 52%,#e0682c 100%);
    --cta:linear-gradient(100deg,#f5bd55,#f58a48);
    --cta-shadow:0 8px 24px -12px rgba(220,120,40,.65);
    --glow-gold:rgba(242,184,75,.28); --glow-ember:rgba(255,138,76,.16); --glow-teal:rgba(60,207,180,.18);
    --field:.4;
    --hatch:repeating-linear-gradient(135deg, #e3e5e0 0 3px, transparent 3px 7px);
    --on-copper:#ffffff; --on-gold:#1a1204; --gold-ink:#8f5c0a;
    color-scheme: light;
  }
}
:root[data-theme="light"]{
  --paper:#f5f6f4; --card:#ffffff; --surface:#fafaf8;
  --ink:#16181c; --ink-soft:#3d4046; --slate:#5a5d63;
  --line:#d8dad4; --line-soft:#e8e9e5;
  --copper:#a8600f; --copper-strong:#8c4f0c; --copper-soft:#f6ead2;
  --gold:#c98a1a; --teal:#11907b; --ember:#d0602a; --good:#2f9a4f; --bad:#cf3b30;
  --spectrum:linear-gradient(100deg,#17a58c 0%,#d6981f 52%,#e0682c 100%);
  --cta:linear-gradient(100deg,#f5bd55,#f58a48);
  --cta-shadow:0 8px 24px -12px rgba(220,120,40,.65);
  --glow-gold:rgba(242,184,75,.28); --glow-ember:rgba(255,138,76,.16); --glow-teal:rgba(60,207,180,.18);
  --field:.4;
  --hatch:repeating-linear-gradient(135deg, #e3e5e0 0 3px, transparent 3px 7px);
  --on-copper:#ffffff; --on-gold:#1a1204; --gold-ink:#8f5c0a;
  color-scheme: light;
}

/* ---------- the glow: always there, faintly, behind every page ---------- */
html{background:var(--paper)}
body{-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:var(--field);
  background:
    radial-gradient(42vw 42vw at 6% 14%,var(--glow-teal),transparent 70%),
    radial-gradient(48vw 48vw at 94% 38%,var(--glow-gold),transparent 70%),
    radial-gradient(40vw 40vw at 28% 96%,var(--glow-ember),transparent 70%)}

/* ---------- brand lockup (mark + wordmark), used in every masthead ---------- */
.brandlink{display:inline-flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:700;font-size:22px;letter-spacing:-.035em;line-height:1;color:var(--ink);text-decoration:none;white-space:nowrap}
.brandlink .mark{width:26px;height:26px;flex:none}
.word .w{background:linear-gradient(100deg,var(--gold),var(--ember));-webkit-background-clip:text;background-clip:text;color:transparent}
.lit{color:var(--copper)}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate)}

/* ---------- the ring: a spinning spectrum edge means "thinking" ---------- */
@property --ring-a{syntax:"<angle>";inherits:false;initial-value:0deg}
.ring{position:relative;border-radius:var(--radius-xl);padding:1.5px;isolation:isolate}
.ring::before,.ring::after{content:"";position:absolute;border-radius:inherit;
  background:conic-gradient(from var(--ring-a),#3ccfb4,#f2b84b,#ff8a4c,#f2b84b,#3ccfb4);
  animation:ringspin 9s linear infinite}
.ring::before{inset:0;z-index:-1}
.ring::after{inset:-14px;border-radius:calc(var(--radius-xl) + 10px);filter:blur(28px);opacity:.28;z-index:-2}
.ring.thinking::before,.ring.thinking::after{animation-duration:2.4s}
.ring.thinking::after{opacity:.5}
@keyframes ringspin{to{--ring-a:360deg}}

/* Scrollbar + selection theming. */
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--paper)}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:var(--radius-pill);border:3px solid var(--paper)}
::-webkit-scrollbar-thumb:hover{background:var(--slate)}
*{scrollbar-color:var(--line) var(--paper)}

@keyframes fluoresce{
  0%{box-shadow:0 0 0 0 transparent}
  35%{box-shadow:var(--fluoresce-ring)}
  100%{box-shadow:0 0 0 0 transparent}
}
.fluoresce{animation:fluoresce 1100ms var(--ease-out) 1}
@media (prefers-reduced-motion:reduce){
  .fluoresce{animation:none;box-shadow:var(--fluoresce-ring)}
  .ring::before,.ring::after{animation:none}
}