/* ============================================================
   tokens.css — Single Source of Truth
   824PR Monorepo Design System
   All sites import this. Sites override via brand.css.
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     SPACING — 8pt grid
     Use these variables everywhere. No magic numbers.
  ---------------------------------------------------------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3: 16px;
  --s-4: 24px;
  --s-5: 32px;
  --s-6: 48px;
  --s-7: 64px;
  --s-8: 96px;
  --s-9: 128px;
  --s-10: 160px;

  /* ----------------------------------------------------------
     TYPOGRAPHY — Fluid scale via clamp()
     No media query breakpoints needed.
     Base: 16px min → 19px max (body copy)
  ---------------------------------------------------------- */
  --t-xs:    clamp(11px, 0.9vw,  12px);
  --t-sm:    clamp(13px, 1.1vw,  15px);
  --t-body:  clamp(16px, 1.4vw,  19px);
  --t-md:    clamp(20px, 2.2vw,  26px);
  --t-lg:    clamp(28px, 3.5vw,  42px);
  --t-xl:    clamp(40px, 5.5vw,  64px);
  --t-hero:  clamp(52px, 8.5vw, 104px);

  /* Font families — overridden per site via brand.css */
  --font-display: 'Geist', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:    'Geist', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono:    'Geist Mono', 'IBM Plex Mono', ui-monospace, monospace;

  /* ----------------------------------------------------------
     MOTION — Apple-grade easing
  ---------------------------------------------------------- */
  --ease:         cubic-bezier(0.25, 0.10, 0.25, 1.00);
  --ease-out:     cubic-bezier(0.00, 0.00, 0.20, 1.00);
  --ease-in:      cubic-bezier(0.40, 0.00, 1.00, 0.60);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1.00);

  --dur-fast:   150ms;
  --dur-base:   280ms;
  --dur-slow:   500ms;
  --dur-scene:  800ms;

  /* ----------------------------------------------------------
     RADIUS
  ---------------------------------------------------------- */
  --r-sm:   6px;
  --r-md:  12px;
  --r-lg:  20px;
  --r-xl:  32px;
  --r-full: 9999px;

  /* ----------------------------------------------------------
     ELEVATION — Shadows
  ---------------------------------------------------------- */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.15), 0 2px 6px rgba(0,0,0,0.10);
  --shadow-lg:  0 16px 48px rgba(0,0,0,0.20), 0 4px 12px rgba(0,0,0,0.12);
  --shadow-xl:  0 32px 80px rgba(0,0,0,0.28);

  /* ----------------------------------------------------------
     LAYOUT
  ---------------------------------------------------------- */
  --max-width:       1200px;
  --content-width:    760px;
  --nav-height:        88px;
  --section-gap:      120px;

  /* ----------------------------------------------------------
     SITE BRAND COLORS — overridden in each site's brand.css
     These are safe fallbacks.
  ---------------------------------------------------------- */
  --brand-primary:   #4f8eff;
  --brand-secondary: #a78bfa;
  --brand-accent:    #2dcc7a;

  --color-bg:        #ffffff;
  --color-surface:   #f5f5f7;
  --color-border:    rgba(0,0,0,0.08);
  --color-text:      #1d1d1f;
  --color-text-2:    #6e6e73;
  --color-text-3:    #aeaeb2;
}

/* Dark mode base — sites can extend */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:      #000000;
    --color-surface: #111111;
    --color-border:  rgba(255,255,255,0.08);
    --color-text:    #f5f5f7;
    --color-text-2:  #86868b;
    --color-text-3:  #48484a;
  }
}