/* Ruhkery — design tokens.
 *
 * Every value below was computed from the logo and its contrast MEASURED
 * against the grounds it is used on before it was written down. The ratios in
 * the comments are measurements, not estimates.
 *
 * THE HUE COMES FROM THE MARK. Sampling the logo — a 400px render, decoded and
 * bucketed — gives a median hue of 194 across the bright pixels of the rook and
 * wings, with the ramp running 191-204. The ground it sits on is #02050b at
 * hue 220. The tokens are anchored at 198: inside the mark's own range, and a
 * ten-degree shift toward cyan from the 208 this system used before.
 *
 * TWO GROUNDS, ON PURPose.
 *   The logo is native to near-black. The reading surface is light and stays
 *   light — long-form research and a CRM table are not read on a dark ground.
 *   So the BRAND FURNITURE (topbar, footer, hero) is the logo's own ink, and
 *   the CONTENT sits on paper. Each has its own verified text colours, and
 *   mixing them up is the one mistake this file exists to prevent.
 *
 * THE RULE THAT MATTERS: --brand-500 is a SURFACE colour, not a text colour.
 * At 3.30:1 on white it clears AA for large text and for graphics, and fails it
 * for body copy. Type and links use --brand-600 (5.08:1). Getting this
 * backwards is the single most common way a vivid palette ships inaccessible.
 */

:root {
  /* ---------- brand: the mark's cyan-blue, hue 198 ----------
     Ratios are against --card (#ffffff), which is the worst case on paper. */
  --brand-hue: 198;
  --brand-100: #d8eff9;   /*  1.19:1 — washes and tints only                 */
  --brand-200: #afdff3;   /*  1.43:1 — decoration, never ink                 */
  --brand-300: #6fc6eb;   /*  1.92:1 on white — DARK GROUNDS ONLY (10.6:1)   */
  --brand-400: #33b0e6;   /*  2.47:1 on white — dark-ground fills (8.3:1)    */
  --brand-500: #1797cf;   /*  3.30:1 — THE brand. Fills, badges, graphics.   */
  --brand-600: #0f76a2;   /*  5.08:1 — AA for text. Links, on-white type.    */
  --brand-700: #0c668d;   /*  6.36:1 — pressed states, high-contrast type    */
  --brand-800: #0b4a65;   /*  9.62:1 — headings on tinted grounds            */
  --brand-tint: #eef8fc;  /* the faintest wash that still reads as blue      */

  /* The mark on the chrome ground. Navy-on-blue on near-black loses its outer
     silhouette, so it gets a WHITE glow — the brand hue sits close enough to the
     mark's own blue that it lifts the fill instead of the edge. Two shadows: a
     tight core for the edge, a wider halo for separation.
     MIRRORS `chrome.mark-glow` in @pangea/design-system. This file is not yet
     an emit target of that package — atlas is — so this pair is the one place in
     the estate a value is still written twice. */
  --chrome-mark-glow: drop-shadow(0 0 1px rgb(255 255 255 / 90%)) drop-shadow(0 0 5px rgb(255 255 255 / 45%));
  /* The mark breaks OUT of the bar rather than fitting inside it: a logo scaled
     to fit reads as furniture, one that overhangs reads as a crest the bar hangs
     from — which is what a mark on a shield is drawn to do. */
  --chrome-mark-size: 58px;
  --chrome-mark-drop: 14px;

  /* ---------- the brand ground: sampled from the logo itself ---------- */
  --ink-deep:  #02050b;   /* the canvas the mark is drawn on                 */
  --ink-panel: #06121c;   /* one step up, for panels on the deep ground      */
  --ink-raise: #0b2233;   /* hairlines and raised edges on dark              */

  /* Type ON the dark ground. Measured against --ink-deep. */
  --on-dark:        #ffffff;  /* 20.41:1                                     */
  --on-dark-muted:  #a9cfe2;  /* 12.35:1 — secondary copy                    */
  --on-dark-faint:  #7d94a4;  /*  6.46:1 — the floor; nothing lighter        */
  --on-dark-accent: #6fc6eb;  /* 10.64:1 — links and marks on dark           */

  /* ---------- ink, for the light reading surface ---------- */
  --ink:        #181f25;  /* 16.65:1 */
  --ink-muted:  #495865;  /*  7.32:1 */
  --ink-faint:  #657686;  /*  4.68:1 — the floor for text; nothing lighter  */
  --ink-ghost:  #9ea9b3;  /*  2.39:1 — NON-TEXT only: rules, marks, dots    */
  --ink-invert: #ffffff;

  /* ---------- grounds: light, faintly cool ---------- */
  --paper: #fcfcfd;
  --card:  #ffffff;
  --sunk:  #f4f6f9;
  --line:        #e3e8ee;
  --line-strong: #cdd5df;

  /* ---------- semantic ---------- */
  --ok:   #0a7d5a;
  --warn: #9a5b00;
  --stop: #b4231f;

  /* ---------- type ---------- */
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --step--1: 13px;
  --step-0:  16px;   /* body — Butterick's 15-25px screen range */
  --step-1:  20px;
  --step-2:  26px;
  --step-3:  34px;
  --step-4:  46px;
  --leading-tight: 1.15;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;
  --measure: 62ch;   /* keeps lines inside 45-90 characters at --step-0 */

  /* The wordmark is set the way the logo sets it: heavy, all caps, tight.
     The tagline is its opposite — light, wide, quiet — and the contrast
     between the two is most of what makes the lockup read as one thing. */
  --wordmark-weight: 800;
  --wordmark-tracking: -0.02em;
  --tagline-tracking: 0.14em;

  /* ---------- space: one 4px scale, no ad-hoc values ---------- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px;
  --s12: 48px; --s16: 64px;

  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  --shadow-soft: 0 1px 2px rgb(24 31 37 / 6%), 0 8px 24px rgb(24 31 37 / 5%);
  --shadow-lift: 0 2px 4px rgb(24 31 37 / 8%), 0 14px 34px rgb(24 31 37 / 11%);

  --motion-fast: 120ms;
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* Areas colour themselves from a hue so adding one is a content change, never a
   CSS change. The brand hue is research's, deliberately: the private thinking
   is the centre of this venture, not a decorative corner of it. */
@media (prefers-reduced-motion: reduce) {
  :root { --motion-fast: 0ms; }
}