/* site/styles/tokens.css
   Design tokens for whatoz. Authored to carry forward into the full site. */
:root {
  /* surfaces */
  --color-surface: oklch(14% 0.012 264);
  --color-surface-raised: oklch(18.5% 0.016 264);
  --color-surface-sunken: oklch(12% 0.012 264);
  --color-hairline: oklch(100% 0 0 / 0.08);
  --color-hairline-strong: oklch(100% 0 0 / 0.14);

  /* text */
  --color-text: oklch(96% 0.004 264);
  --color-text-muted: oklch(74% 0.012 264);
  --color-text-faint: oklch(58% 0.012 264);

  /* single accent (solid, no gradient) */
  --color-accent: oklch(70% 0.17 252);
  --color-accent-strong: oklch(78% 0.18 252);
  --color-accent-glow: oklch(70% 0.17 252 / 0.22);

  /* type */
  --font-display: "Space Grotesk Variable", system-ui, sans-serif;
  --font-body: "Inter Variable", system-ui, sans-serif;
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --text-wordmark: clamp(2.85rem, 0.9rem + 8.2vw, 7.25rem);

  /* spacing */
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-8: 5rem;
  /* deliberate, non-uniform rhythm: hero is a tight unit, then a wide beat to the card,
     then a measured beat to the waitlist */
  --space-hero: clamp(0.75rem, 0.4rem + 1.4vw, 1.5rem);
  --space-section: clamp(3.5rem, 2.2rem + 6vw, 7.5rem);
  --space-section-tight: clamp(2.5rem, 1.6rem + 4vw, 5rem);

  /* radius */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* motion */
  --dur-fast: 160ms;
  --dur-press: 120ms;
  --dur-normal: 320ms;
  --dur-slow: 760ms;
  /* emil-grade curves: strong ease-out so entrances feel responsive, not sluggish */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  /* layout */
  --maxw: 60rem;
}

@font-face {
  font-family: "Space Grotesk Variable";
  src: url("/fonts/space-grotesk.woff2") format("woff2");
  font-weight: 300 700; font-display: swap; font-style: normal;
}
@font-face {
  font-family: "Inter Variable";
  src: url("/fonts/inter.woff2") format("woff2");
  font-weight: 100 900; font-display: swap; font-style: normal;
}