/* =============================================================================
   tokens.css — Rut'n Buck public-site design tokens (Foundation layer)
   -----------------------------------------------------------------------------
   The LOCKED "elevated-rugged" design language for the rebuilt rutnbuck.com.
   Pure custom properties — no selectors that paint, no build step. Every public
   page + primitive draws on these; nothing hardcodes hex/px. Page children NEVER
   redefine these — a gap here is a Foundation change, flagged back.

   Brand source of truth: .claude/context/design-system.md (colors, fonts, scale).
   This file makes the design-system tables real as fluid tokens.
   Legacy index.html/style.css is untouched and stays live until cutover.
   ============================================================================= */

:root {
  /* ---- Color · Brand ---------------------------------------------------- */
  --black:       #111111;
  --white:       #FFFFFF;
  --red:         #C41A1A;
  --red-dark:    #9B1111;
  --tan:         #D4C5A9;
  --tan-light:   #E8DFC8;

  /* ---- Color · Neutrals ------------------------------------------------- */
  --darkest:     #0A0A0A;
  --surface:     #1A1A1A;
  --border:      #2A2A2A;
  --grey-dark:   #333333;
  --muted:       #555555;
  --grey:        #888888;
  --grey-light:  #E5E5E5;

  /* ---- Color · Semantic ------------------------------------------------- */
  --success:     #2CA01C;
  --warning:     #E6A700;
  --error:       #C41A1A;
  --info:        #0077C5;

  /* ---- Color · Public surfaces (elevated-rugged roles) ------------------ */
  --page-bg:        var(--tan-light);   /* warm default canvas              */
  --page-bg-alt:    #F2ECDD;            /* faint warm alternate band        */
  --card-bg:        var(--white);
  --ink:            var(--black);       /* body text on light               */
  --ink-soft:       var(--grey-dark);   /* secondary text on light          */
  --ink-faint:      var(--muted);       /* tertiary / captions on light     */
  --on-dark:        var(--white);       /* text on black/red                */
  --on-dark-soft:   rgba(255,255,255,.72);
  --hairline:       rgba(17,17,17,.12); /* dividers on light                */
  --hairline-dark:  rgba(255,255,255,.14);

  /* ---- Type · families (public) ----------------------------------------- */
  --font-heading:      'brothers', 'Rockwell', Georgia, serif;
  --font-body:         'Outfit', 'Trebuchet MS', system-ui, sans-serif;
  --font-body-backup:  'Chivo', system-ui, sans-serif;
  --font-accent:       'Bungee Inline', 'Impact', sans-serif;
  --font-cta-primary:  'los-feliz', Georgia, serif;
  --font-cta-secondary:'gin', Georgia, serif;
  --font-display:      var(--font-heading);   /* legacy alias */

  /* ---- Type · fluid scale (mobile → desktop via clamp) ------------------ */
  --fs-display:  clamp(2.5rem, 1.6rem + 4.2vw, 4.5rem);   /* hero display    */
  --fs-hero:     clamp(2rem,   1.4rem + 2.9vw, 3rem);     /* hero headline   */
  --fs-h1:       clamp(1.5rem, 1.18rem + 1.5vw, 2.25rem);
  --fs-h2:       clamp(1.15rem,1.0rem  + 0.7vw, 1.5rem);
  --fs-h3:       clamp(1rem,   0.95rem + 0.3vw, 1.15rem);
  --fs-body-lg:  clamp(1rem,   0.96rem + 0.3vw, 1.15rem);
  --fs-body:     clamp(0.9rem, 0.88rem + 0.12vw, 0.95rem);
  --fs-small:    clamp(0.8rem, 0.78rem + 0.1vw, 0.85rem);
  --fs-label:    0.7rem;
  --fs-micro:    0.6rem;

  --lh-tight:    1.1;
  --lh-snug:     1.2;
  --lh-heading:  1.15;
  --lh-body:     1.6;

  --tracking-cta:  0.06em;   /* uppercase CTA / label letter-spacing */
  --tracking-accent: 0.04em;

  /* ---- Spacing · 4px grid (design-system table) ------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ---- Layout ----------------------------------------------------------- */
  --container:      1100px;
  --container-wide: 1280px;
  --container-text: 720px;                       /* prose / readable width   */
  --gutter:    clamp(16px, 4vw, 24px);           /* container side padding   */
  --section-y: clamp(48px, 7vw, 80px);           /* vertical section rhythm  */
  --nav-h:     64px;

  /* ---- Radius ----------------------------------------------------------- */
  --radius-sm:   4px;
  --radius:      8px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  /* ---- Elevation (shadows) --------------------------------------------- */
  --shadow-1:   0 2px 8px rgba(0,0,0,.12);
  --shadow-2:   0 8px 24px rgba(0,0,0,.18);
  --shadow-3:   0 18px 48px rgba(0,0,0,.28);
  --shadow-red: 0 0 20px rgba(196,26,26,.15);

  /* ---- Motion · RESTRAINT (elevated-rugged ≠ bouncy) -------------------- */
  --ease:      cubic-bezier(.2,.6,.2,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --dur-fast:  120ms;
  --dur:       200ms;
  --dur-slow:  360ms;
  --reveal-shift: 16px;   /* how far scroll-reveal elements travel (subtle)  */

  /* ---- z-index scale ---------------------------------------------------- */
  --z-base:    1;
  --z-sticky:  100;
  --z-nav:     1000;
  --z-overlay: 2000;
  --z-modal:   3000;
}

/* Honor reduced-motion globally at the token level — page motion reads these. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur:      0ms;
    --dur-slow: 0ms;
    --reveal-shift: 0px;
  }
}