/* ============================================================================
   RANCO tokens — replaces design/snippets/tokens-template.css for this build.
   Pasted verbatim from clients/ranco/design-brief.md §2.1. Every @contrast
   comment is copied from design/snippets/contrast-check.py output at
   derivation time (D-16) — do not hand-edit a ratio comment; re-run the
   checker if any token moves.

   Load order: ibix-base.css -> tokens.css -> fonts.css -> type-scale.css ->
   layout-primitives.css -> motion-kit.css -> micro-interactions.css ->
   sticky-cta.css -> ranco.css (site's own, last).
   ========================================================================= */

:root {
  /* RANCO palette — hues fixed from the vector logo master; lightness solved.
     Ratios generated by design/snippets/contrast-check.py on 2026-08-04 (D-16 pipeline,
     0.04045 linearization per F-32 / D-6). NEVER hand-edit a ratio comment.       */

  /* ---- surfaces (light ground is mandatory: the logo's navy vanishes on dark) --- */
  --bg:        oklch(97.6% 0.004 266);  /* #f6f7fa  cool paper, brand-hue tinted    */
  --surface:   oklch(94.5% 0.008 266);  /* #eaedf2  banded sections, register rows  */
  --elevated:  oklch(99.2% 0.002 266);  /* #fcfcfe  logo tiles, form fields         */

  /* ---- ink ------------------------------------------------------------------ */
  --ink:       oklch(24% 0.045 266);    /* #151e35 · 15.45:1 bg · 14.10:1 surface · 16.15:1 elevated */
  --muted:     oklch(46% 0.04 266);     /* #4d586f ·  6.67:1 bg ·  6.08:1 surface ·  6.97:1 elevated */

  /* ---- accent = the logo navy, exactly ---------------------------------------- */
  --accent:    oklch(34% 0.089 266);    /* #223566 · 11.08:1 bg · 10.11:1 surface · 11.58:1 elevated */
  --accent-ink:oklch(97.6% 0.004 266);  /* #f6f7fa · 11.08:1 on --accent — button label            */

  /* ---- signal = the logo blue, exactly ---------------------------------------- */
  --signal:    oklch(62.5% 0.128 243);  /* #328fce ·  3.29:1 bg ·  3.00:1 surface ·  3.44:1 elevated
                                           DECOR / LARGE-DISPLAY ONLY. 3.00:1 on --surface is on the
                                           3:1 line — it is NEVER a control boundary, never a
                                           meaningful icon carrying meaning alone, never body text. */
  --signal-ink:oklch(50% 0.117 245);    /* #1568a1 ·  5.56:1 bg ·  5.07:1 surface ·  5.81:1 elevated
                                           use wherever blue must carry small text                */

  /* ---- borders ---------------------------------------------------------------- */
  --border-subtle:      oklch(88% 0.006 266); /* #d5d7db · 1.35:1 bg · 1.23:1 surface · 1.41:1 elevated
                                                 DECORATIVE HAIRLINE ONLY — never the sole boundary
                                                 of a control (D-16)                              */
  --border-interactive: oklch(61% 0.012 266); /* #80838b ·  3.54:1 bg ·  3.23:1 surface ·  3.70:1 elevated */

  /* ---- the one dark moment (LEDGER's inverted panel) --------------------------- */
  --panel:        oklch(22% 0.05 266);   /* #101932 · 16.24:1 against --bg                        */
  --panel-text:   oklch(96.5% 0.004 266);/* #f2f3f6 · 15.68:1 on --panel                          */
  --panel-muted:  oklch(75% 0.02 266);   /* #a8aebb ·  7.82:1 on --panel                          */
  --panel-signal: oklch(62.5% 0.128 243);/* #328fce ·  4.93:1 on --panel — text-safe HERE          */
  --panel-border: oklch(55% 0.02 266);   /* #6c727e ·  3.60:1 on --panel                          */

  /* ---- geometry, rhythm, finish ------------------------------------------------ */
  --step-display: clamp(2.25rem, calc(1.5rem + 3.333vw), 4.5rem); /* 36→72px, DIR-2 verbatim */
  --gap-row: var(--space-7); --gap-col: var(--space-2);            /* DIR-2 spec-sheet asymmetry (DP2, F-80) */
  --radius: 4px; --radius-sm: 2px;
  --shadow: 0 1px 2px oklch(24% 0.045 266 / .06), 0 1px 3px oklch(24% 0.045 266 / .10);
  --grade: none;   /* DELIBERATE — see design-brief.md §4.3. The grade is already baked into assets-build/. */

  /* ---- fixed header height, consumed by hero patterns (D-1 in hero-patterns.html) - */
  --header-h: 76px;
}

@supports not (color: oklch(0% 0 0)) { :root {
  --bg:#f6f7fa; --surface:#eaedf2; --elevated:#fcfcfe;
  --ink:#151e35; --muted:#4d586f;
  --accent:#223566; --accent-ink:#f6f7fa;
  --signal:#328fce; --signal-ink:#1568a1;
  --border-subtle:#d5d7db; --border-interactive:#80838b;
  --panel:#101932; --panel-text:#f2f3f6; --panel-muted:#a8aebb;
  --panel-signal:#328fce; --panel-border:#6c727e;
} }

/* Colour rules that bind the build (design-brief.md §2.2) — restated as comments
   so the rules travel with the tokens:
   1. The mark never sits on --panel, on any photograph, or on any tinted block.
   2. --signal is decoration and large display only; use --signal-ink for small text.
   3. Focus ring: --accent on light surfaces, --panel-signal inside the panel.
   4. No #000 / #fff surfaces.
   5. --border-subtle is decorative only; every control boundary is --border-interactive.
   6. One accent: --accent is the only colour that carries interaction. */