/* =============================================================================
   Design tokens — the single source of truth for colour in this app.
   =============================================================================

   Lifted verbatim from the original prototype. Every colour in the app resolves
   through one of these custom properties; nothing hardcodes a hex value. That is
   what makes the three themes work, and it is why the charts can recolour
   themselves at runtime by reading these with getComputedStyle().

   Three blocks, in this order:
     1. :root                              — light theme, the default
     2. @media (prefers-color-scheme: dark) — system dark, unless forced to light
     3. :root[data-theme="dark"]            — dark forced by the theme toggle

   The media query is guarded with :root:not([data-theme="light"]) so that an
   explicit "light" choice wins over the operating system's preference.

   Tailwind reads these too — see tailwind.config.js — so `bg-surface` and
   `var(--surface)` are the same colour by construction.

   ADDING A COLOUR: add it to all three blocks. A token that only exists in one
   will silently fall back to the inherited value in the other themes.
   ========================================================================== */

:root {
  color-scheme: light;
  /* -- dusk garden palette -- */
  --ground:        #f1f4e8;
  --ground-wash:   #e8ecdc;
  --surface:       #fffefb;
  --surface-2:     #eef1e3;
  --ink:           #23261c;
  --ink-soft:      #585c4a;
  --ink-faint:     #8a8e78;
  --line:          rgba(35,38,28,0.11);
  --line-strong:   rgba(35,38,28,0.20);
  --accent:        #a8752b;
  --accent-ink:    #6e4c1c;
  --accent-soft:   #ecdfbd;
  --accent-glow:   rgba(168,117,43,0.22);
  --accent-glow-2: rgba(168,117,43,0.10);
  --star-color:    rgba(35,38,28,0.09);
  --glass-bg:      rgba(255,255,255,0.40);
  --glass-border:  rgba(255,255,255,0.65);
  --glass-shadow:  0 4px 18px -8px rgba(35,38,28,.22);
  /* score semantics — validated diverging pair, reserved for score meaning only */
  --pos:           #4d7fae;
  --neg:           #c15f56;
  --neutral-bg:    #e7e4d8;
  --pos-tint:      #e5edf5;
  --neg-tint:      #f6e6e4;
  /* categorical (grid-view area accents only) */
  --series-1: #2a78d6; --series-2: #c9662a; --series-3: #1b9c6d; --series-4: #b98300;
  --series-5: #c15c85; --series-6: #4c7a1f; --series-7: #6a53b0;
  --shadow-card: 0 1px 2px rgba(35,38,28,.04), 0 10px 22px -13px rgba(35,38,28,.14);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground:        #171a2c;
    --ground-wash:   #12142280;
    --surface:       #1f2338;
    --surface-2:     #262a43;
    --ink:           #eeecf6;
    --ink-soft:      #bab7cc;
    --ink-faint:     #83809c;
    --line:          rgba(238,236,246,0.10);
    --line-strong:   rgba(238,236,246,0.20);
    --accent:        #dcac57;
    --accent-ink:    #f2d19a;
    --accent-soft:   #3a2f18;
    --accent-glow:   rgba(220,172,87,0.24);
    --accent-glow-2: rgba(220,172,87,0.12);
    --star-color:    rgba(238,236,246,0.55);
    --glass-bg:      rgba(255,255,255,0.08);
    --glass-border:  rgba(255,255,255,0.16);
    --glass-shadow:  0 4px 20px -8px rgba(0,0,0,.5);
    --pos:           #82a7d4;
    --neg:           #d1827c;
    --neutral-bg:    #2c2f4a;
    --pos-tint:      #22304a;
    --neg-tint:      #392a29;
    --series-1: #4f93e8; --series-2: #e08144; --series-3: #2fbf8a; --series-4: #d1a12e;
    --series-5: #dd82a6; --series-6: #7fbf46; --series-7: #9c85e6;
    --shadow-card: 0 1px 2px rgba(0,0,0,.22), 0 14px 26px -15px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground:        #171a2c;
  --ground-wash:   #12142280;
  --surface:       #1f2338;
  --surface-2:     #262a43;
  --ink:           #eeecf6;
  --ink-soft:      #bab7cc;
  --ink-faint:     #83809c;
  --line:          rgba(238,236,246,0.10);
  --line-strong:   rgba(238,236,246,0.20);
  --accent:        #dcac57;
  --accent-ink:    #f2d19a;
  --accent-soft:   #3a2f18;
  --accent-glow:   rgba(220,172,87,0.24);
  --accent-glow-2: rgba(220,172,87,0.12);
  --star-color:    rgba(238,236,246,0.55);
  --glass-bg:      rgba(255,255,255,0.08);
  --glass-border:  rgba(255,255,255,0.16);
  --glass-shadow:  0 4px 20px -8px rgba(0,0,0,.5);
  --pos:           #82a7d4;
  --neg:           #d1827c;
  --neutral-bg:    #2c2f4a;
  --pos-tint:      #22304a;
  --neg-tint:      #392a29;
  --series-1: #4f93e8; --series-2: #e08144; --series-3: #2fbf8a; --series-4: #d1a12e;
  --series-5: #dd82a6; --series-6: #7fbf46; --series-7: #9c85e6;
  --shadow-card: 0 1px 2px rgba(0,0,0,.22), 0 14px 26px -15px rgba(0,0,0,.45);
}


/* -----------------------------------------------------------------------------
   Base element styling that depends on the tokens above.

   The star field and accent glow are the prototype's original background. They
   stay as the default and as the fallback for the 'none' background mode, so
   turning the animated canvas off returns you to this rather than a flat colour.
   -------------------------------------------------------------------------- */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* Restore the browser's default line-height.
 *
 * Tailwind's Preflight sets `html { line-height: 1.5 }`. The prototype was
 * designed against the browser default (`normal`, roughly 1.2), and setting
 * explicit line-heights only where it wanted them — the wheel's band label,
 * the insight sentences, the connection notice. Leaving Preflight's value in
 * place inflates every element that does not override it: measured against the
 * original, the per-area card grew from 475px to 527px and each note field
 * from 58px to 67px.
 *
 * This is the one place the Tailwind layer had to be pushed back on. Utilities
 * like `leading-relaxed` still work; this only changes what is inherited when
 * nothing asks.
 */
html { line-height: normal; }

body {
  background:
    radial-gradient(1.4px 1.4px at 12% 22%, var(--star-color), transparent 60%) 0 0/180px 220px repeat,
    radial-gradient(1px 1px at 48% 62%, var(--star-color), transparent 60%) 0 0/140px 165px repeat,
    radial-gradient(1.6px 1.6px at 78% 18%, var(--star-color), transparent 60%) 0 0/230px 260px repeat,
    radial-gradient(1px 1px at 28% 85%, var(--star-color), transparent 60%) 0 0/165px 195px repeat,
    radial-gradient(1.3px 1.3px at 62% 42%, var(--star-color), transparent 60%) 0 0/205px 240px repeat,
    radial-gradient(1100px 680px at 20% 0%, var(--accent-glow), transparent 62%) 0 0/auto no-repeat,
    radial-gradient(900px 640px at 88% 55%, var(--accent-glow-2), transparent 68%) 0 0/auto no-repeat,
    var(--ground);
  background-attachment: fixed, fixed, fixed, fixed, fixed, scroll, scroll, scroll;
  color: var(--ink);
  font-family: 'Karla', system-ui, -apple-system, "Segoe UI", sans-serif;
  min-height: 100vh;
  padding-bottom: 56px;
  -webkit-font-smoothing: antialiased;
}

.display { font-family: 'Karla', system-ui, sans-serif; font-weight: 600; }
.mono { font-family: 'Karla', system-ui, sans-serif; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
h1, h2, h3 { text-wrap: balance; }
::selection { background: var(--accent-glow); }
button { font-family: inherit; }
a { color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }