/* ============================================================
   tokens.css — design tokens (color, type, spacing, motion)
   ============================================================ */

:root {
  /* --- Color ---------------------------------------------------- */
  --color-ink: #0B0B0F;
  --color-bone: #F4F4F1;
  --color-blue: #1C69D4;
  --color-blue-900: #0E3F7E;
  --color-blue-50: #EAF1FC;
  --color-gold: #D4AF37;
  --color-coral: #FF6B5B;
  --color-coral-50: #FFEEEB;
  --color-coral-900: #A8362A;
  --color-teal: #2EC4B6;
  --color-teal-50: #E5F8F5;
  --color-teal-900: #15695F;
  --color-ink-900: #0B0B0F;
  --color-ink-700: #1F1F26;
  --color-ink-500: #5A5A66;
  --color-ink-300: #A6A6B0;
  --color-line: #E6E6E1;
  --color-line-dark: #26262D;

  /* --- Type ----------------------------------------------------- */
  --font-display: "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                  Roboto, "Helvetica Neue", Arial, sans-serif;

  --fs-display-xl: clamp(3.5rem, 7vw, 6.5rem);
  --fs-display-lg: clamp(2.75rem, 5vw, 4.5rem);
  --fs-display-md: clamp(2rem, 3.5vw, 3rem);
  --fs-h1: 2.25rem;
  --fs-h2: 1.75rem;
  --fs-h3: 1.375rem;
  --fs-h4: 1.125rem;
  --fs-body-lg: 1.125rem;
  --fs-body: 1rem;
  --fs-body-sm: 0.875rem;
  --fs-eyebrow: 0.75rem;

  /* --- Spacing (4-pt grid) ------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;
  --space-48: 192px;

  /* --- Radii ---------------------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* --- Shadows (3-tier elevation) ------------------------------- */
  --shadow-1: 0 1px 2px rgba(11,11,15,0.06), 0 2px 6px rgba(11,11,15,0.04);
  --shadow-2: 0 6px 16px rgba(11,11,15,0.08), 0 12px 32px rgba(11,11,15,0.06);
  --shadow-3: 0 20px 48px rgba(11,11,15,0.14), 0 32px 80px rgba(11,11,15,0.10);

  /* --- Motion vocabulary ---------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-linear: linear;
  --dur-micro: 120ms;
  --dur-default: 400ms;
  --dur-editorial: 800ms;

  /* --- Breakpoints (referenced via @media) --------------------- */
  /* xs 480 / sm 768 / md 1024 / lg 1280 / xl 1600 */

  /* --- Z-index scale -------------------------------------------- */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-overlay: 1000;
  --z-modal: 1100;
  --z-toast: 2000;

  /* --- Container ------------------------------------------------ */
  --max-width: 1280px;
  --side-pad: clamp(20px, 4vw, 64px);

  color-scheme: light;
}