/* ═══ RoRo Quantum — shared design tokens (CANONICAL SOURCE) ═══════════════════════════════════
 *
 * §9. Three apps used to define three palettes under the SAME variable names: --bg was #ffffff in
 * the console and #0d0f12 in the lab, --err was #b91c1c in the console and #f2777a in the lab, --r
 * was 10px in one and 6px in the other. Nothing was wrong with any of those values — each was tuned
 * for its own ground — but the shared NAME is the bug: a component copied between apps silently
 * changes colour, and a fair visitor walking lab → console → admin sees three products. The
 * inventory that opened this slice found the failure already in the tree, three times:
 *
 *   apps/console/src/pages/CircuitBuilder.tsx  var(--danger, #e5484d)  → --danger was defined NOWHERE,
 *                                              so the invalid-QASM border painted a FOURTH red.
 *   apps/admin/src/ProgramsAdmin.tsx           var(--brand, #6d28d9)   → --brand defined nowhere, so
 *                                              a purple border in a strictly monochrome admin.
 *   apps/admin/src/sections/Operators.tsx      var(--ok, #16a34a)      → --ok defined nowhere; it only
 *                                              LOOKED right because the fallback happened to match.
 *
 * The fix is not one palette — the console is a light page-document, the lab is a dark IDE, and both
 * are right. The fix is that every value with a name lives HERE, once, and each app maps its own role
 * tokens onto these primitives. So:
 *
 *   - everything in this file is --roro-* prefixed and is a LITERAL. It can therefore never collide
 *     with an app's role token (--bg, --ink, --accent …), and an app may only ADD to it, never
 *     redefine it. scripts/sync-brand.sh --check enforces both.
 *   - nothing in this file is theme-dependent: no @media (prefers-color-scheme), no [data-theme].
 *     A primitive is a colour, not a decision. The lab picks --roro-green-300 on its dark ground and
 *     --roro-green-700 on its light one; that CHOICE stays in the lab's own sheet, which is what keeps
 *     both themes working after the move.
 *   - the neutral SURFACE ramps are deliberately NOT all here. --roro-neutral-* is the light
 *     monochrome ramp the console and the admin already shared byte-for-byte with no mechanism
 *     keeping them equal — that is real duplication and it is now canonical. The lab's dark ramp and
 *     its own light ramp were each contrast-tuned against their own grounds (its sheet documents the
 *     AA maths per token), so folding them in here would be a silent repaint, not a refactor. They
 *     stay in apps/lab/src/styles.css, which is where the lab's identity belongs.
 *
 * Edit THIS file and run `bash scripts/sync-brand.sh`. Editing a vendored copy is drift: that app
 * builds, the others keep the old value, and CI fails the push.
 *
 * 2026-09-24 (R-60): this file moved from packages/roro-tokens/src to packages/brand/tokens, next
 * to the fonts loader and the motion library, and gained the ADDITIVE v2 set below (the one accent,
 * four radius steps, the third motion step). Nothing existing changed value: the console's
 * styles.tokens.test.ts still resolves every role to what it painted before, which is the proof
 * that vendoring v2 is not a repaint. Which app maps a role onto the accent, and when, is that
 * app's own repaint slice (design/README.md has the order).
 */
:root{
  /* ── type. The same four stacks in every app, three times over until now. The faces come from
   *    packages/brand/fonts/fonts.css, the ONE self-hosted set (vendored next to this file and served
   *    from /assets/fonts/), because a booth network that filters fonts.googleapis.com used to leave
   *    every app on its fallback face permanently. ui-monospace sits ahead of the generic monospace
   *    so that fallback is SF Mono / Consolas rather than Courier. */
  --roro-font-ui:'Inter',system-ui,sans-serif;
  --roro-font-display:'Space Grotesk','Inter',sans-serif;
  --roro-font-mono:'JetBrains Mono',ui-monospace,monospace;
  --roro-font-arabic:'IBM Plex Sans Arabic','Inter',system-ui,sans-serif;
  --roro-font-arabic-display:'IBM Plex Sans Arabic','Space Grotesk',sans-serif;

  /* ── radius scale. Named by their size, not by t-shirt size, because "medium" is exactly the word
   *    that let the console mean 10px and the lab mean 6px under one name. The density difference is
   *    real and stays: the console maps --r to 10, the lab maps --r to 6. */
  --roro-radius-4:4px;
  --roro-radius-6:6px;
  --roro-radius-8:8px;
  --roro-radius-10:10px;
  /* v2 — the steps the surfaces were filling by hand: the academy's cards (14px / 10px), the console's
   *    dialogs (14px), the copilot's cards and sheets (12 / 16 / 22px) and every pill (100px, 999px,
   *    50%…). -full is the pill; -12/-14/-16 are the card and dialog sizes. */
  --roro-radius-12:12px;
  --roro-radius-14:14px;
  --roro-radius-16:16px;
  --roro-radius-full:999px;

  /* ── neutral ramp, light ground (the console + the admin; zinc). Step numbers are lightness, not
   *    order of use, so a new step can be inserted without renumbering the rest. */
  --roro-neutral-0:#ffffff;
  --roro-neutral-25:#fafafa;
  --roro-neutral-50:#f7f7f8;
  --roro-neutral-200:#e7e7ea;
  --roro-neutral-300:#d9d9de;
  --roro-neutral-350:#d4d4d8;
  --roro-neutral-400:#b8b8be;
  --roro-neutral-450:#a1a1aa;
  --roro-neutral-500:#71717a;
  --roro-neutral-700:#3f3f46;
  --roro-neutral-850:#27272a;
  --roro-neutral-900:#18181b;
  --roro-neutral-950:#09090b;

  /* ── semantic: critical. Two inks, not one, because they do different jobs and the contrast maths
   *    differs: -700 is the ERROR INK on its own tint (#b91c1c on --roro-red-50 ≈ 6.4:1), -600 is the
   *    SOLID red that carries white text (toast dot, offline banner) and the destructive icon on its
   *    own 8% wash. -300 / -500 are the lab's, retuned for its dark and light grounds. */
  --roro-red-50:#fef2f2;
  --roro-red-100:#fecaca;
  /* -200 and -800 are the lab's destructive TEXT on a red-washed ground (a danger button's 14–24%
   *    wash, the delete card's 6% wash under it, a failed-run chip on a selected row). The washes
   *    darken a light ground and lighten a dark one, so the -500 / -300 inks lose the margin they
   *    have on a bare surface: -500 falls to 3.38:1 on a hovered danger button inside the delete
   *    card, -300 to 3.70:1. Same hue as those two, one lightness step further out: -800 (#9b2c2f)
   *    is 4.88:1 there on the light ground, -200 (#f5999b) 4.76:1 on the dark one. */
  --roro-red-200:#f5999b;
  --roro-red-300:#f2777a;
  --roro-red-500:#c33c40;
  --roro-red-600:#dc2626;
  --roro-red-700:#b91c1c;
  --roro-red-800:#9b2c2f;

  /* ── semantic: positive. Same two-job split as the reds: -650 is the positive INK on a light ground
   *    (4.35:1 on white, which is why it and not the lighter -600 is what `--ok` resolves to), -600 is
   *    the SOLID green surface — the success toast's dot, the admin toast's 3px rule. -800/-50/-100 are
   *    the saved-note trio; -300/-700 are the lab's accent on its dark and its light ground. */
  --roro-green-50:#f0fdf4;
  --roro-green-100:#bbf7d0;
  --roro-green-300:#6ee7a8;
  --roro-green-600:#16a34a;
  --roro-green-650:#0f8a3d;
  --roro-green-700:#0a7443;
  --roro-green-800:#166534;

  /* ── semantic: caution. THE ONE SLOT STILL SPLIT: the console's caution ink is -600 and the lab's
   *    light theme uses -700, so `--warn` does not resolve to one colour across the two apps. That is
   *    left as two NAMED steps rather than quietly harmonised, because the choice has real contrast
   *    consequences — -600 drops to ~4.4:1 on the lab's --panel-2, under the AA floor its sheet holds
   *    itself to, while -700 clears 4.5:1 on every surface in both apps. Picking one is a design
   *    decision (and a visible repaint of one app), not a refactor; when it is taken, it is one line
   *    in each app's role block. -300 is the lab's dark-ground caution. */
  --roro-amber-300:#f0c674;
  --roro-amber-600:#b45309;
  --roro-amber-700:#8f6108;
  /* -800 is caution as SMALL TEXT on a warm-tinted light ground (the lab's read-only shelf label):
   *    -700 is 4.53:1 on the lab's --panel-2 and dips to 4.30:1 once that card mixes 4% amber into
   *    its ground; -800 is 5.44:1 there and 6.85:1 on white. */
  --roro-amber-800:#7a5306;

  /* ── informational. The one brand blue both light apps already agreed on (the qsr link, the admin's
   *    info toast). */
  --roro-blue-600:#0A4FF0;

  /* ── accent (v2, K6 2026-09-23): ONE accent on every surface — the copilot's teal, lifted verbatim
   *    and named by lightness like the other ramps. Before this ramp existed the console painted an
   *    "aurora" of three greens/cyans, the academy an indigo, the lab a green, the copilot a teal and
   *    the landing nothing: five products at one stand. The ramp is ADDITIVE here — no app maps a role
   *    onto it until its own repaint slice — so vendoring it changes no pixel. The numbers below are
   *    WCAG 2.x ratios recomputed by packages/brand/test/tokens.matrix.test.mjs, which fails if one
   *    drops under 4.5:1.
   *    Light ground: -700 is the accent INK (5.07:1 on --roro-neutral-0, 4.85:1 on -25, 4.73:1 on
   *    -50, 4.65:1 on teal-50) and -800 its hover, also the SOLID that carries white text (7.52:1).
   *    -700 on teal-100 is only 4.00:1 — teal-100 is a border and a wash, never a text ground.
   *    Dark ground: -300 is the accent INK (13.22:1 on --roro-neutral-950, 12.76:1 on the lab's
   *    #0d0f12, 10.77:1 on its lightest surface #1c2127) and -200 its hover; text ON a solid -300
   *    surface (a run button) uses -ink-on-300 (9.51:1). Focus rings stay ink on every surface — the
   *    copilot's own rule — so the accent never competes with keyboard focus. */
  --roro-teal-50:#eef7f6;
  --roro-teal-100:#cfeae6;
  --roro-teal-200:#A7F0E8;
  --roro-teal-300:#7CE4D9;
  --roro-teal-700:#0E7C72;
  --roro-teal-800:#0A5F58;
  --roro-teal-ink-on-300:#06302c;

  /* ── elevation + focus for the LIGHT ground (console + admin, identical strings until now). The
   *    lab's shadows are tuned for a dark ground and its ring is a mix over its own accent, so both
   *    stay in the lab's sheet. */
  --roro-shadow-1:0 1px 2px rgba(9,9,11,.04),0 1px 3px rgba(9,9,11,.05);
  --roro-shadow-3:0 12px 32px rgba(9,9,11,.10);
  --roro-focus-ring-ink:0 0 0 3px rgba(9,9,11,.12);
  --roro-focus-outline-w:2px;
  --roro-focus-outline-offset:2px;

  /* ── motion. Two durations and one curve, named by their value like the radius scale. The lab had
   *    .1s, .12s, .13s, .15s and .18s for the same kind of chrome change — five numbers 20-30ms apart,
   *    a maintenance tax nobody can perceive. 120 is a state change under the pointer (colour, border,
   *    a chevron turning); 180 is something arriving (an overlay, a spotlight moving). The curve is a
   *    quick start that settles, for entrances. A spinner or skeleton loop is not chrome motion and
   *    keeps its own period. */
  --roro-duration-120:120ms;
  --roro-duration-180:180ms;
  /* v2 — the third step and the tools that go with it. 320 is a page or section transition, a
   *    skeleton giving way to content, a success/error state settling, a counter reaching its value:
   *    long enough to read as a change of scene, short enough that a demo never waits for it. The
   *    in-out curve is for something moving between two resting places (a panel sliding, a tab
   *    indicator); entrances keep --roro-ease-out. 40ms is the gap between list items arriving —
   *    a 12-row table finishes inside one 320. packages/brand/motion/motion.ts mirrors all of these
   *    for framer-motion, and its test fails if the two drift. */
  --roro-duration-320:320ms;
  --roro-ease-out:cubic-bezier(.2,.8,.3,1);
  --roro-ease-inout:cubic-bezier(.65,0,.35,1);
  --roro-stagger-40:40ms;
}