/* tokens.css · Scalemagic · dark theme from the MotionSites portfolio template. Every value in styles.css references these. */
:root, [data-theme="dark"] {
  /* colour (template) */
  --bg: #0a0a0a;
  --surface: #141414;
  --text: #f5f5f5;
  --muted: #888888;
  --accent: #f5f5f5;
  --stroke: #1f1f1f;
  /* derived */
  --stroke-2: #2a2a2a;
  --text-2: oklch(96% 0 0 / 0.72);
  --grad: linear-gradient(90deg, #89aacc 0%, #4e85bf 100%);
  --grad-rev: linear-gradient(90deg, #4e85bf 0%, #89aacc 100%);
  --blue: #89aacc;
  --blue-2: #4e85bf;
  --blue-bg: rgba(137, 170, 204, 0.12);
  --glow: 0 0 8px rgba(137, 170, 204, 0.35);
  --ok: #7fd1a8;
  --ok-bg: rgba(127, 209, 168, 0.12);
  --warn: #e7a86b;
  --warn-bg: rgba(231, 168, 107, 0.12);
  --error: #f08a7e;
  --scrim: rgba(0, 0, 0, 0.7);
  --shadow: rgba(0, 0, 0, 0.6);

  /* type — Inter throughout (template body font; display serif dropped by site rule) */
  --font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --text-hero: clamp(3.5rem, 1.6rem + 8vw, 8rem);
  --text-h2: clamp(1.875rem, 1.4rem + 1.9vw, 2.875rem);
  --text-quote: clamp(1.375rem, 1.05rem + 1.3vw, 2rem);
  --text-h3: 1.125rem;
  --text-lg: 1.0625rem;
  --text-md: 0.9375rem;
  --text-sm: 0.875rem;
  --text-xs: 0.75rem;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --track-display: -0.045em;
  --track-heading: -0.03em;
  --track-caps: 0.3em;

  /* space — 4pt scale */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px;
  --s8: 40px; --s9: 56px; --s10: 72px; --s11: 96px; --s12: 128px;

  /* shape */
  --r-sm: 10px;
  --r-md: 14px;
  --r-card: 20px;
  --r-lg: 28px;
  --r-pill: 999px;

  /* motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-std: cubic-bezier(0.4, 0, 0.2, 1);
  --fast: 180ms;
  --med: 360ms;

  --max: 1200px;
  --z-nav: 50;
  --z-loader: 9999;
}