/* Tokens — the ONE definition of every colour, radius and curve on this site.
 *
 * The ramps are lifted verbatim from the app's `packages/ui/src/App.css`, in the
 * same space-separated RGB form, so a hue has one definition across the product
 * and this site. Nothing here is a colour the site invented.
 *
 * Below the ramps sit SEMANTIC tokens — --ground, --surface, --text, --edge — and
 * those are the only things any other stylesheet reads. That is what makes the
 * theme switch one block of overrides rather than a `[data-theme]` variant on
 * every selector, and it is why a new page needs no colour of its own.
 *
 * Load this FIRST. Every other stylesheet here assumes it. */

/* ── Tokens ───────────────────────────────────────────────────────────────
   The ramps are lifted verbatim from the app's App.css, in the same
   space-separated RGB form, so a hue has one definition across the product and
   this page. Nothing here is a colour this page invented.

     --n-*      the neutral ramp (cool charcoal; the app's `slate-*` scale)
     --brand-*  the accent, the mark's blue leaf
     --leaf-*   the mark's five leaves, the ONE source of categorical colour

   Below them sit SEMANTIC tokens — --ground, --surface, --text, --edge — and
   those are the only things the rules further down read. That is what makes the
   theme switch one block of overrides rather than a `[data-theme]` variant on
   every selector. */
:root {
  --n-50: 247 247 248;
  --n-100: 237 237 239;
  --n-200: 220 220 224;
  --n-300: 190 190 197;
  --n-400: 163 163 173;
  --n-500: 111 111 120;
  --n-600: 94 94 103;
  --n-700: 58 58 64;
  --n-800: 41 41 47;
  --n-900: 27 27 31;
  --n-950: 20 20 22;

  --brand-300: 222 239 224;
  --brand-400: 201 227 205;
  --brand-500: 82 119 96;
  --brand-600: 22 61 52;
  --brand-700: 22 61 52;

  /* The mark's leaves at tone 500 — the logo colour itself. These do NOT vary
     with the theme, because in the app they do not: LeafMark, SectionLabel's
     tick and IconChip's dot all state tone 500 unconditionally. Stepping light
     mode down was tried there and reverted as a contrast reflex that cost the
     one thing that matters — a leaf has to be the colour you recognise. They
     always sit beside their own label, so the hue is never the sole carrier. */
  --leaf-red-500: 125 157 137;
  --leaf-amber-500: 125 157 137;
  --leaf-green-500: 125 157 137;
  --leaf-teal-500: 125 157 137;
  --leaf-blue-500: 125 157 137;

  /* Three radii and a shape, replacing the eight this page used to spend
     (10px cards, 5px code, 999px pills). Same scale as the app, same reasons:
     the mark's corner chord is 5.2% of its width and it never goes pill, so
     `full` is a SHAPE — dots and spinners — and not a size. */
  --r-ctl: 4px;    /* anything you click or type in */
  --r-card: 8px;   /* a card, a well, a popover */
  --r-panel: 14px; /* a panel, a modal, the shell */

  /* One easing curve for the whole app, and now for the whole page. Every
     animation below reads this rather than restating a bezier. */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Light, and it is the default ─────────────────────────────────────────
   The app opens dark; this page opens light, because the first thing on it is
   the mark on its own off-white tile and a near-black page makes that tile the
   brightest object on the screen. The logo sets the ground here.

   Two states and no third. The app's theme is `light | dark` with no "system"
   option, so this page does not consult prefers-color-scheme either — a page
   that quietly opened dark on a dark-OS machine would not be light by default,
   it would be light by coincidence. The choice persists in localStorage. */
:root {
  color-scheme: light;

  --ground: var(--n-50);
  --surface: 255 255 255;      /* a card is white on light, not a tinted neutral */
  --surface-2: var(--n-100);   /* a well, an inline code chip */
  --text: var(--n-900);
  --text-muted: var(--n-600);  /* body copy inside a card */
  --text-faint: var(--n-400);  /* section labels, list markers, the footer */

  /* Borders are ALPHA, never a solid neutral. A solid edge is correct on exactly
     one background; the same rule over a card, a chip or a coloured wash goes
     muddy. An alpha edge composites against whatever is behind it. */
  --edge: 18 21 27 / .07;
  --edge-2: 18 21 27 / .10;
  --edge-hover: 18 21 27 / .20;

  /* The cleave line where slate splits: light falls on the top face of a layer,
     so stating that is cheaper and truer than a drop shadow. */
  --lit: 255 255 255 / .55;
  --drop: 0 1px 3px rgb(18 21 27 / .08), 0 1px 2px rgb(18 21 27 / .06);

  --chip-bg: 255 255 255;
  --btn-fg: 255 255 255;
  --btn-hover: var(--brand-600);
  --code-fg: var(--brand-700);
  --ring-offset: 255 255 255;
  --scroll-thumb: var(--n-300);

  --aura: 0;                /* white shows a tint far more readily than black */
  --tile-shadow: 0 10px 40px rgb(18 21 27 / .10), 0 0 0 1px rgb(18 21 27 / .06);
  --trace: var(--brand-500) / .5;

  /* The demo's two borrowed treatments, per theme. Both are the app's, not this
     page's: `--ok-*` is the green a terminal line goes when a call went through,
     and `--atom-*` is the DECISION badge on a FactRow — amber because
     `lib/style/fact-kind.ts` maps decision to the amber leaf, and 500/.08 over
     leaf-700 text because that is what `LEAF_BADGE` states. A kind's hue is
     decided in exactly one place in the app, and this page does not get a vote. */
  --ok-fg: 6 123 82;              /* leaf green 700 */
  --atom-bg: var(--leaf-amber-500) / .08;
  --atom-fg: 168 116 0;           /* leaf amber 700 */

  /* The graph, per theme. Every hub colour lives here rather than in the script,
     so the whole per-hue/per-theme decision can be read in one place.

     Amber takes a darker stop than the other three — the mark's amber is far
     lighter than its blue (OKLCH L .815 against .587), and a hub is the largest
     area of leaf colour anywhere on the page, which is where that difference
     stops being invisible. Role tones varying per hue is the app's rule in
     palette.ts, not an exception made here. */
  --hub-blue: 125 157 137;
  --hub-amber: 125 157 137;      /* leaf amber 700 */
  --hub-teal: 125 157 137;      /* leaf teal 600 */
  --hub-red: 125 157 137;        /* leaf red 600 */
  --graph-hub-a: .42;
  --graph-atom: var(--n-400);
  --graph-atom-a: .42;
  --graph-spoke-a: .20;
  --graph-thread-a: .10;
  --graph-pulse: var(--brand-600);
  --graph-core: var(--brand-700);
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --ground: var(--n-950);
  --surface: var(--n-900);
  --surface-2: var(--n-800);
  --text: var(--n-100);
  --text-muted: var(--n-400);
  --text-faint: var(--n-500);

  --edge: 255 255 255 / .07;
  --edge-2: 255 255 255 / .09;
  --edge-hover: 255 255 255 / .18;

  --lit: 255 255 255 / .055;
  --drop: 0 1px 2px rgb(0 0 0 / .28);

  --chip-bg: 255 255 255 / .03;
  --btn-fg: var(--n-950);
  --btn-hover: var(--brand-400);
  --code-fg: var(--brand-300);
  --ring-offset: var(--n-950);
  --scroll-thumb: var(--n-700);

  --aura: 0;
  --tile-shadow: 0 10px 40px rgb(0 0 0 / .6), 0 0 0 1px rgb(255 255 255 / .06);
  --trace: var(--brand-400) / .7;

  /* Both step to the 300 on dark and the badge wash moves to the 400, which is
     the light/dark pair `LEAF_BADGE` writes out for every leaf. */
  --ok-fg: 120 210 166;           /* leaf green 300 */
  --atom-bg: 254 192 89 / .10;    /* leaf amber 400 */
  --atom-fg: 255 206 128;         /* leaf amber 300 */

  /* Hubs step one tone lighter on the dark ground — the same branch the app's
     own graph renderer makes (400 on dark, 500 on light). Amber still sits a
     stop below its neighbours for the reason above. */
  --hub-blue: 125 157 137;      /* leaf blue 400 */
  --hub-amber: 125 157 137;      /* leaf amber 600 */
  --hub-teal: 125 157 137;      /* leaf teal 400 */
  --hub-red: 125 157 137;      /* leaf red 400 */
  --graph-hub-a: .55;
  --graph-atom: var(--n-300);
  --graph-atom-a: .30;
  --graph-spoke-a: .10;
  --graph-thread-a: .045;
  --graph-pulse: var(--brand-400);
  --graph-core: 255 255 255;
}

/* Organic identity (ADR 0122): the mark is forest on light, mint on dark; lime means running. */
:root { --mark: 22 61 52; --live: 92 138 26; --btn-fg: 245 243 236; }
:root[data-theme="dark"] { --mark: 201 227 205; --live: 184 230 106; --btn-fg: 22 61 52; --btn-hover: 222 239 224; --code-fg: 201 227 205; }

/* The brand's five tones (packages/ui/src/App.css --brand-tone-*): a family mark wears
   them, one per leaf, when its place is selected. Forest, then Mint. */
:root { --tone-red: 125 157 137; --tone-amber: 82 119 96; --tone-teal: 63 107 85; --tone-blue: 36 87 74; --tone-green: 22 61 52; }
:root[data-theme="dark"] { --tone-red: 201 227 205; --tone-amber: 169 205 177; --tone-teal: 147 178 158; --tone-blue: 125 157 137; --tone-green: 94 143 121; }