/* ════════════════════════════════════════════════════════════════════
   MyIntelligence · MAGIC HOUR — design tokens, the single source of truth
   ────────────────────────────────────────────────────────────────────
   Atmospheric perspective as memory: the nearest ridge is today — sharp
   and dark. Everything you've lived recedes in softening, rim-lit
   layers. Luminous skies belong to SCENERY ONLY; the UI itself runs on
   exactly two hues.

   THE LAWS:
     1. TWO ACCENTS, ZERO SLOP — teal knows (what the substrate can
        prove), coral lives (you, now, needs-you). They never share an
        element. No other hue may appear in UI chrome. Ever.
     2. COLOUR = PROOF — states earn colour: lived (teal tint),
        settled (teal filled), now (coral), asserted (uncoloured,
        dashed), fading (losing its ink). No purples, no ambers,
        no red/green.
     3. SCENES ARE SCENERY — gradients exist only inside a scene
        (sky, sun, ridges). Cards stay flat except the 1px horizon rim
        on their top edge. One scene per screen, max. aria-hidden,
        never carries data.
     4. TRIADS — every accent ships base + -ink (text on this mode's
        ground) + -tint (fill behind it). Code against the triad,
        never the hex.

   MODES:
     DUSK (default, :root) — indigo magic hour · cockpit, twin, review
     MORNING ([data-theme="light"]) — warm paper under a pale sky ·
     documents, marketing

   TYPE (never changes mode):
     Zen Maru Gothic (display) · M PLUS Rounded 1c (body + light
     numerals) · Klee One (the memory hand — recalled experience is
     written, not typed) · Spline Sans Mono (eyebrows, provenance)

   How to use:
     <link rel="stylesheet" href="/brand/tokens.css">
     Dusk is the default. Morning applies via [data-theme="light"].
     Scene variants: .scene-daybreak / .scene-day / .scene-magichour /
     .scene-moonrise scope the --sky/--sun/--ridge/--rim tokens locally.

   THERE IS ONE OF THIS FILE. Three deployments serve a copy — this root
   original, `src/personal_vault/brand/` (the vault app, whose image ships
   only `src/`), and `prototypes/33prime/brand/` (the site, a separate Fly
   app). `tests/test_brand_assets.py` asserts all three are byte-identical,
   so a copy that drifts fails the suite instead of surprising someone
   months later. It already happened once: the site copy gained sea-glass
   morning ridges and `.scene-day` while this one kept olive, and both
   files carried a comment claiming they were in sync.

   TO CHANGE A COLOUR: edit one line below — every surface follows.
   ════════════════════════════════════════════════════════════════════ */

/* ══ DUSK ─ indigo magic hour · the default ══════════════════════════ */
:root{
  /* ground & surfaces — indigo, never pure black, never violet */
  --bg:        #0f1424;   /* page ground */
  --panel:     #171d33;   /* cards */
  --panel-2:   #202844;   /* second elevation, insets, code blocks */
  --panel-3:   #293252;   /* third elevation: hover fills, active rows */
  --line:      #2c3552;   /* hairline borders */
  --line-2:    #242c47;   /* softer inner dividers */

  /* ink — cool white through indigo greys */
  --ink:       #eef1f8;   /* headlines, numerals, primary copy */
  --ink-soft:  #aeb6cf;   /* body */
  --ink-faint: #7a83a3;   /* captions, provenance, eyebrows */
  --ink-mute:  #525b7a;   /* faded/decaying content, disabled */

  /* ── THE TWO ACCENTS · the only hues in the UI ── */
  --lived:     #2fb3bd;  --lived-ink:#4ecdd6;  --lived-tint:rgba(47,179,189,.14);   /* teal knows */
  --now:       #e07a58;  --now-ink:  #f09a7c;  --now-tint:  rgba(224,122,88,.14);   /* coral lives */

  /* interactive */
  --action:      #ede6d4; /* primary button — lantern light on dusk */
  --action-text: #1a2138;
  --focus:       var(--lived);              /* focus ring colour */

  /* ── chart marks · VALIDATED (dataviz six-checks, surface #171d33) ── */
  --chart-know: #1e9ba5;  /* data series — teal, L in dark band */
  --chart-live: #d97250;  /* reference/average line — coral */
  --chart-grid: var(--line-2);

  /* ── scenery · magic hour (dusk default scene) — NEVER UI ── */
  --sky-0:#0c1122; --sky-1:#182448; --sky-2:#25445e; --sky-glow:#3f8a92;
  --sun:#f0906c; --sun-core:#ffd9b0;
  --ridge-1:#2b4a66;  /* farthest — hazy, oldest memory */
  --ridge-2:#20344f;
  --ridge-3:#16243c;
  --ridge-4:#0e1730;  /* nearest — sharp, today */
  --rim-teal:rgba(126,220,226,.5); --rim-warm:rgba(240,144,108,.55); --rim-faint:rgba(126,220,226,.18);
  --star:#f3e9d2; --cloud:#26355a;

  /* the horizon rim — every card's top edge catches the light */
  --card-rim-a:rgba(94,212,221,.4); --card-rim-b:rgba(240,154,124,.3);

  /* elevation — depth by darkness, warm-free */
  --shadow-rest: 0 1px 2px rgba(0,0,0,.3), 0 12px 34px rgba(3,6,18,.45);
  --shadow-hover:0 2px 4px rgba(0,0,0,.35), 0 18px 44px rgba(3,6,18,.55);
  --shadow-float:0 24px 60px rgba(3,6,18,.6);
  --shadow-modal:0 40px 90px rgba(3,6,18,.7);

  /* type */
  --disp:'Zen Maru Gothic',ui-rounded,system-ui,sans-serif;
  --sans:'M PLUS Rounded 1c',ui-rounded,system-ui,sans-serif;
  --hand:'Klee One','Zen Maru Gothic',cursive;
  --mono:'Spline Sans Mono',ui-monospace,Menlo,monospace;

  /* radius scale */
  --radius:18px;      /* cards, panels */
  --radius-sm:12px;   /* inputs, inner blocks, MCP panels */
  --radius-xs:8px;    /* chips inside tables, code spans */
  --radius-pill:999px;/* buttons, pills, toggles */

  /* spacing scale (4px base) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:44px; --s9:60px;

  /* motion — the present holds still; only the far layers drift */
  --t-fast:140ms;  --t-soft:260ms;  --t-slow:420ms;
  --t-scene:26s;   /* scenery drift */
  --ease:cubic-bezier(.4,0,.2,1);

  /* z-scale */
  --z-sticky:20; --z-overlay:40; --z-toast:50;
}

/* ══ MORNING ─ warm paper under a pale sky ═══════════════════════════ */
[data-theme="light"]{
  --bg:#f5f1e8; --panel:#fbf8f1; --panel-2:#ece5d4; --panel-3:#e4dbc6;
  --line:#e0d7c2; --line-2:#e9e2d1;
  --ink:#201c15; --ink-soft:#5b5344; --ink-faint:#8a7f6c; --ink-mute:#b0a591;

  --lived:#12939f; --lived-ink:#0d707a; --lived-tint:rgba(18,147,159,.12);
  --now:#dd6f52;   --now-ink:#bf5138;   --now-tint:rgba(221,111,82,.13);

  --action:#2f2a20; --action-text:#f7f2e7;

  /* chart marks · VALIDATED (surface #fbf8f1) */
  --chart-know:#12939f; --chart-live:#dd6f52; --chart-grid:var(--line-2);

  /* scenery · daybreak (morning default scene) — sea-glass waves, not olive */
  --sky-0:#c3dce0; --sky-1:#dbe7dd; --sky-2:#f6e8d2; --sky-glow:#f6d9b4;
  --sun:#ef9464; --sun-core:#ffe3bd;
  --ridge-1:#c6d6d4; --ridge-2:#a9c3c4; --ridge-3:#8dadb2; --ridge-4:#6f959c;
  --rim-teal:rgba(255,255,255,.9); --rim-warm:rgba(239,148,100,.55); --rim-faint:rgba(255,255,255,.6);
  --star:transparent; --cloud:#fdfbf4;

  --card-rim-a:rgba(18,147,159,.28); --card-rim-b:rgba(221,111,82,.25);

  --shadow-rest: 0 1px 2px rgba(70,58,34,.05), 0 6px 22px rgba(70,58,34,.08);
  --shadow-hover:0 2px 4px rgba(70,58,34,.06), 0 14px 34px rgba(70,58,34,.12);
  --shadow-float:0 24px 60px rgba(70,58,34,.15);
  --shadow-modal:0 40px 90px rgba(70,58,34,.22);
}

/* ══ SCENE VARIANTS ─ versions of the horizon ════════════════════════
   The mode picks the default scene (dusk → magic hour, morning →
   daybreak). A variant class on the scene's container overrides it —
   e.g. the archive always sits under moonrise, whatever the mode.   */

.scene-daybreak{
  --sky-0:#c3dce0; --sky-1:#dbe7dd; --sky-2:#f6e8d2; --sky-glow:#f6d9b4;
  --sun:#ef9464; --sun-core:#ffe3bd;
  --ridge-1:#c6d6d4; --ridge-2:#a9c3c4; --ridge-3:#8dadb2; --ridge-4:#6f959c;
  --rim-teal:rgba(255,255,255,.9); --rim-warm:rgba(239,148,100,.55); --rim-faint:rgba(255,255,255,.6);
  --star:transparent; --cloud:#fdfbf4;
}
/* day — sun high over sea-glass waves (the living sky's 11:00–17:00 band) */
.scene-day{
  --sky-0:#9cc4cf; --sky-1:#c6dcd6; --sky-2:#eee3cb; --sky-glow:#f6dcb2;
  --sun:#f2a06b; --sun-core:#ffe9c8;
  --ridge-1:#b5cdd1; --ridge-2:#96b7bd; --ridge-3:#7aa0a8; --ridge-4:#5d868f;
  --rim-teal:rgba(255,255,255,.9); --rim-warm:rgba(242,160,107,.5); --rim-faint:rgba(255,255,255,.55);
  --star:transparent; --cloud:#ffffff;
}
.scene-magichour{
  --sky-0:#0c1122; --sky-1:#182448; --sky-2:#25445e; --sky-glow:#3f8a92;
  --sun:#f0906c; --sun-core:#ffd9b0;
  --ridge-1:#2b4a66; --ridge-2:#20344f; --ridge-3:#16243c; --ridge-4:#0e1730;
  --rim-teal:rgba(126,220,226,.5); --rim-warm:rgba(240,144,108,.55); --rim-faint:rgba(126,220,226,.18);
  --star:#f3e9d2; --cloud:#26355a;
}
.scene-moonrise{
  --sky-0:#070b18; --sky-1:#0e1530; --sky-2:#16214a; --sky-glow:#243a6e;
  --sun:#dfe6f4; --sun-core:#ffffff;          /* the moon takes the sun's tokens */
  --ridge-1:#1c2c4a; --ridge-2:#141f3a; --ridge-3:#0e162c; --ridge-4:#080d1e;
  --rim-teal:rgba(168,196,255,.4); --rim-warm:rgba(223,230,244,.35); --rim-faint:rgba(168,196,255,.15);
  --star:#f3e9d2; --cloud:#141d38;
}