@layer tokens {
/* ============================================================
   Sleevenine Program — Shared Design Foundation: TOKENS
   Usage: set the --brand-* tokens per site, then import this
   file plus components.css. Everything below adapts.
   ============================================================ */

:root {
  /* ---- Brand (override per site — keep to ONE dominant hue) ---- */
  --brand-600: #1d4ed8;   /* primary actions, links */
  --brand-700: #1e40af;   /* hover states */
  --brand-50:  #eff6ff;   /* tinted surfaces */
  --brand-100: #dbeafe;
  --accent-500: #0ea5e9;  /* sparing highlights, gradients */

  /* ---- Neutrals (warm-leaning for friendliness; swap if needed) ---- */
  --ink-950: #0c0f14;
  --ink-900: #141a23;
  --ink-700: #2b3442;
  --ink-500: #5b6676;
  --ink-400: #7d8898;
  --paper:   #ffffff;
  --paper-2: #f7f8fa;   /* alt section background */
  --line:    #e6e9ef;   /* hairlines */

  /* ---- Type ---- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Fluid scale — display shrinks gracefully on mobile */
  --text-hero:    clamp(2.5rem, 1.4rem + 5vw, 4.5rem);
  --text-h1:      clamp(2rem, 1.3rem + 3.2vw, 3.25rem);
  --text-h2:      clamp(1.5rem, 1.15rem + 1.8vw, 2.25rem);
  --text-h3:      1.25rem;
  --text-lead:    clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  --text-body:    1rem;
  --text-small:   0.875rem;
  --text-caption: 0.75rem;

  --leading-tight: 1.05;
  --leading-snug:  1.25;
  --leading-body:  1.65;

  --tracking-display: -0.02em;

  /* ---- Spacing (8pt) ---- */
  --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem;
  --s6: 1.5rem;  --s8: 2rem;   --s12: 3rem;  --s16: 4rem;
  --s24: 6rem;   --s32: 8rem;

  --section-pad: clamp(3.5rem, 2rem + 6vw, 7rem);
  --container: 72rem;          /* 1152px */
  --container-narrow: 44rem;

  /* ---- Shape & depth ---- */
  --radius-sm: 0.5rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.25rem;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgb(12 15 20 / 0.06);
  --shadow-md: 0 6px 24px -8px rgb(12 15 20 / 0.14);
  --shadow-lg: 0 24px 64px -24px rgb(12 15 20 / 0.22);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 220ms;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

  :root {
    --brand: var(--brand-600);
    --brand-strong: var(--brand-700);
    --surface: var(--paper);
    --ink: var(--ink-900);
    --muted: var(--ink-500);
    --wrap: var(--container);
    --radius-s: var(--radius-sm);
    --radius-m: var(--radius-md);
    --radius-l: var(--radius-lg);
    --shadow-1: var(--shadow-sm);
    --shadow-2: var(--shadow-md);
    --dur-1: 120ms;
    --dur-2: var(--dur);
    --dur-3: 320ms;
  }
}