/* ── fomi · design tokens ────────────────────────────────────────────
   Two hues. Everything else is neutral, typography and rules.

   The brand hue is the logo green, so green now means fomi *and* upside,
   and the warm hue is left holding only one job: something went against
   us, or the bot said no. Anything that used to be orange because it was
   brand is green here; anything that was orange because it was bad is
   --neg.
   ------------------------------------------------------------------ */

:root {
  /* surface · black with green in it, so the accent sits on its own
     family rather than on a neutral it has to fight */
  --bg:      #04110B;
  --bg-2:    #071710;
  --bg-3:    #0C2018;
  --bg-inv:  #E9F7EF;

  /* ink, three steps, all of them legible.
     --ink-3 carries every 11px label on the page, so it is held at 5:1
     against --bg rather than being tuned purely by eye. */
  --ink:     #E9F7EF;   /* 17.0:1 */
  --ink-2:   #9BB6A7;   /*  8.8:1 */
  --ink-3:   #71907F;   /*  5.4:1 */
  --ink-inv: #04110B;

  /* rules */
  --line:    #142A20;
  --line-2:  #1F3B2D;

  /* the only two hues in the system */
  --acc:     #2FE08D;   /* brand + upside */
  --pos:     var(--acc);
  --neg:     #FF5D4A;   /* refusal + downside */

  /* Type laid over --acc. The accent is a light green now, not a dark
     orange, so white on it is unreadable and the ink has to invert. */
  --on-acc:  #04110B;

  --acc-dim: color-mix(in oklab, var(--acc) 15%, transparent);
  --pos-dim: var(--acc-dim);
  --neg-dim: color-mix(in oklab, var(--neg) 16%, transparent);

  /* The logo's backdrop, borrowed: a grid and a glow, both faint enough
     to read as paper rather than as a chart nobody plotted. */
  --grid:    color-mix(in oklab, var(--acc) 9%, transparent);
  --glow:    color-mix(in oklab, var(--acc) 13%, transparent);

  /* type */
  --sans: "Inter Tight", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Sized against #main, not the viewport, the rail and the data column
     eat ~540px and viewport units do not know that. The vw value here is
     only the fallback for a context with no container; .display overrides
     it with cqw, which is what actually governs. */
  --t-display: clamp(56px, 8vw, 150px);
  --t-h1:      clamp(38px, 5.4vw, 76px);
  --t-h2:      clamp(26px, 2.9vw, 44px);
  --t-h3:      clamp(19px, 1.5vw, 24px);
  --t-body:    15.5px;
  --t-sm:      13px;
  --t-lbl:     11px;
  --t-mono:    12.5px;

  /* space */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s7: 32px; --s8: 40px; --s9: 48px; --s10: 64px;
  --s11: 80px; --s12: 96px; --s13: 128px;

  /* frame */
  --bar-h:   52px;
  --rail-w:  208px;
  --side-w:  330px;
  --pad:     clamp(20px, 3.2vw, 48px);

  --r1: 0px; --r2: 4px; --r3: 6px; --r4: 8px;

  --ease: cubic-bezier(.2, .7, .25, 1);
  --fast: 140ms var(--ease);
  --med:  220ms var(--ease);
}

/* The light theme is the logo itself: mint paper, and an accent taken
   down far enough to hold a rule and a line of 11px type on it. */
:root[data-theme="light"] {
  --bg:      #E6F7EC;
  --bg-2:    #DCF1E3;
  --bg-3:    #CFE9D8;
  --bg-inv:  #06170F;

  --ink:     #06170F;   /* 16.6:1 */
  --ink-2:   #3F5A4B;   /*  6.8:1 */
  --ink-3:   #4F6A5A;   /*  5.3:1 */
  --ink-inv: #E6F7EC;

  --line:    #C3DFCE;
  --line-2:  #A8CDB7;

  /* Mint paper reflects a lot of light, so the accent has to come down a
     long way from the logo green: it carries 11px labels here (.sec-n,
     .flow-n, .mech h3), and it is the ground white type sits on when a
     button is hovered. Held at 4.7:1 on --bg and 5.3:1 under white. */
  --acc:     #0A7C48;
  --neg:     #C43312;   /*  4.9:1 */
  --on-acc:  #FFFFFF;

  --grid:    color-mix(in oklab, var(--acc) 11%, transparent);
  --glow:    color-mix(in oklab, var(--acc) 10%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  :root { --fast: 1ms linear; --med: 1ms linear; }
}