/**
 * tokens.css — v5 brand design tokens
 *
 * The canonical v5 palette, typography, spacing, and motion, expressed as CSS
 * custom properties. Every page and component imports this first. Source of
 * truth: the v5 brand book (engagements/rtsn-studios-v5/brand-book/brand-book.html)
 * and .claude/rules/visual-production.md.
 *
 * Discipline: light-throughout. No dark backgrounds. Signal is the weapon
 * colour — never more than ~10% of any surface.
 */

:root {
  /* ---- Palette — v5 canonical (6 core) ---------------------------------- */
  --canvas:   #F7F4EE;   /* primary background — ~60% of every surface     */
  --ink:      #0F0F0F;   /* primary text + structure — ~30% with Muted     */
  --muted:    #6B6864;   /* secondary text                                 */
  --signal:   #C0533A;   /* weapon colour — emphasis only, <=10% of surface */
  --verdant:  #3D7A72;   /* secondary accent                               */
  --sapphire: #2E5F82;   /* secondary accent                               */

  /* Tonal — darker Signal for AA-normal text + CTAs. Signal itself is only
     4.21:1 on Canvas (AA-large only); Signal-Lo is 6.31:1 — AA at any size. */
  --signal-lo: #94402D;

  /* ---- Derived surfaces (opacity variants of the canonical hex) --------- */
  --rule:      rgba(15, 15, 15, 0.08);   /* hairline rules + borders        */
  --rule-firm: rgba(15, 15, 15, 0.16);   /* a firmer divider                */
  --soft-bg:   #ECE9E3;                  /* recessed panel background       */
  --ink-04:    rgba(15, 15, 15, 0.04);   /* faint fill — code, chips        */
  --signal-08: rgba(192, 83, 58, 0.08);  /* signal tint — sparing           */
  --shadow-card: 0 6px 20px rgba(15, 15, 15, 0.07);  /* card hover lift     */

  /* ---- Typography — free Google Fonts ---------------------------------- */
  --font-body:    'DM Sans', system-ui, -apple-system, sans-serif;
  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-mono:    'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- Spacing scale (8px base) ----------------------------------------- */
  --space-1:  0.5rem;
  --space-2:  1rem;
  --space-3:  1.5rem;
  --space-4:  2rem;
  --space-6:  3rem;
  --space-8:  4rem;
  --space-12: 6rem;
  --space-16: 8rem;

  /* ---- Layout ----------------------------------------------------------- */
  --wrap-max: 1140px;   /* max content width                                */
  --measure:  38ch;     /* readable line-length for body copy               */
  --spine:    2px;      /* left-spine motif width                           */

  /* ---- Motion — calm, no bounce ----------------------------------------- */
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);  /* ease-out              */
  --dur-fast:  140ms;
  --dur-base:  240ms;
}