/* ─────────────────────────────────────────────────────────────
   RCG Canonical Design Tokens — single source of truth
   Mirrors the brand contract: .claude/skills/rcg-design/colors_and_type.css
   Link this AFTER site-chrome.css on a page to make that page fully
   contract-compliant (canonical values, flat, quiet motion).

   New code should use the --rcg-* / semantic names. The "Legacy aliases"
   block keeps existing page CSS (--brand-red, --serif, --ink-muted, shadow
   tokens, motion) working while pointing it at the canonical values.
   ───────────────────────────────────────────────────────────── */

/* Body type is Helvetica Neue, declared once in site-chrome.css (Light 300,
   Regular 400, Medium 500, Bold 700). The Helvetica Neue LT Pro faces this
   file used to declare were retired 2026-09-02 — one sans family site-wide. */

:root {
  /* ── Foundations ─────────────────────────────────────────── */
  --rcg-paper-white:   #FFFFFE;
  --rcg-paper-warm:    #F7F5F2;
  --rcg-stage:         #D1D2D4;   /* hero stage panel (warm-gray, from comp) */
  --rcg-rich-black:    #1A1919;
  --rcg-ink-soft:      #5B5C5B;   /* metadata / secondary text */
  --rcg-red:           #BE2E2B;   /* the scalpel — strategic accents only */
  --rcg-red-hover:     #9A2422;

  --rcg-green:         #315A49;
  --rcg-blue:          #29254E;

  --rcg-neutral-100:   #F7F5F2;
  --rcg-neutral-200:   #E4E4E3;
  --rcg-neutral-300:   #CBCCCB;
  --rcg-neutral-400:   #B4B5B4;
  --rcg-neutral-500:   #9F9F9E;
  --rcg-neutral-600:   #5B5C5B;
  --rcg-neutral-900:   #1A1919;

  /* ── Semantic roles ──────────────────────────────────────── */
  --bg:                var(--rcg-paper-white);
  --bg-warm:           var(--rcg-paper-warm);
  --bg-inverse:        var(--rcg-rich-black);
  --bg-accent:         var(--rcg-red);
  --fg1:               var(--rcg-rich-black);
  --fg2:               var(--rcg-ink-soft);
  --fg3:               var(--rcg-neutral-500);
  --fg-on-dark:        var(--rcg-paper-white);
  --fg-accent:         var(--rcg-red);
  --rule:              var(--rcg-rich-black);
  --rule-soft:         var(--rcg-neutral-300);

  /* ── Type ────────────────────────────────────────────────── */
  --font-serif:        "freight-big-pro", Georgia, "Times New Roman", serif;
  --font-sans:         "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* ── Spacing · 4-base scale ──────────────────────────────── */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px; --space-10: 128px;

  /* ── Radii ───────────────────────────────────────────────── */
  --radius-none: 0;
  --radius-pill: 999px;

  /* ── Motion · quiet, no bounce ───────────────────────────── */
  --rcg-ease:          cubic-bezier(0.2, 0, 0, 1);
  --rcg-duration-fast: 120ms;
  --rcg-duration:      200ms;
  --rcg-duration-slow: 320ms;

  /* ─────────────────────────────────────────────────────────
     Legacy aliases → canonical values.
     Existing page/class CSS keeps working but renders on-brand.
     ───────────────────────────────────────────────────────── */
  --brand-red:         var(--rcg-red);
  --brand-red-hover:   var(--rcg-red-hover);
  --rich-black:        var(--rcg-rich-black);
  --white:             var(--rcg-paper-white);
  --paper:             var(--rcg-paper-warm);
  --ink-muted:         var(--rcg-ink-soft);   /* was #525252 → canonical #5B5C5B */
  --gray:              var(--rcg-ink-soft);   /* was #656668 → canonical #5B5C5B */
  --stone:             var(--rcg-neutral-500);
  --border:            rgba(26, 25, 25, 0.10);
  --soft-rule:         rgba(26, 25, 25, 0.12);
  --serif:             var(--font-serif);
  --sans:              var(--font-sans);
  --ease:              var(--rcg-ease);
  --ease-out:          var(--rcg-ease);
  --dur:               var(--rcg-duration);
  --dur-slow:          var(--rcg-duration-slow);

  /* Shadows killed per brand contract ("no shadows"). */
  --frame-shadow:        none;
  --panel-shadow:        none;
  --panel-shadow-hover:  none;
  --shadow-soft:         none;
  --shadow-large:        none;
}