/* tokens.css — single source of truth for color, type, spacing, motion. */
/* Every other stylesheet consumes these variables. Do not hard-code values elsewhere. */

:root {
  /* Color — Laboratory Noir */
  --ink:        #0A0B0E;
  --ink-2:      #11131A;
  --ink-3:      #1A1D26;
  --bone:       #F4F0E8;
  --bone-dim:   rgba(244, 240, 232, 0.72);
  --bone-faint: rgba(244, 240, 232, 0.48);
  --accent:     #7BD8C4;
  --accent-2:   #C9A86A;
  --rule:       rgba(244, 240, 232, 0.10);
  --danger:     #E5736D;

  /* Typography */
  --font-display: "Caecilia Heavy Italic", "PMN Caecilia Sans", Georgia, serif;
  --font-secondary: "Syne", system-ui, sans-serif;
  --font-body: "Figtree", system-ui, sans-serif;
  --font-mono: ui-monospace, "JetBrains Mono", SFMono-Regular, Menlo, monospace;

  /* Type scale — fluid via clamp(), mobile-first */
  --fs-hero:    clamp(2.5rem, 8vw, 6rem);
  --fs-h2:      clamp(1.75rem, 4.5vw, 3.5rem);
  --fs-h3:      clamp(1.125rem, 2vw, 1.5rem);
  --fs-body:    clamp(1rem, 1.05vw, 1.125rem);
  --fs-caption: 0.8125rem;
  --fs-eyebrow: 0.6875rem;

  /* Line heights */
  --lh-tight: 1.04;
  --lh-snug:  1.18;
  --lh-body:  1.55;

  /* Spacing (rem, 4px grid) */
  --s-0: 0;
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;

  /* Layout */
  --content-max: 1280px;
  --content-wide: 1440px;
  --gutter: clamp(1rem, 4vw, 2rem);

  /* Motion */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  --dur-base: 280ms;
  --dur-slow: 600ms;

  /* Elevation (subtle on dark) */
  --shadow-1: 0 1px 0 0 var(--rule), 0 24px 48px -28px rgba(0,0,0,0.6);
  --shadow-2: 0 1px 0 0 var(--rule), 0 40px 80px -32px rgba(0,0,0,0.8);

  /* Radii */
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 14px;
  --r-4: 22px;

  /* Z layers */
  --z-nav: 100;
  --z-drawer: 200;
  --z-sticky-cta: 90;
}

/* Reduced motion globally honors the OS-level setting. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}