/* Hallmark · pre-emit critique: P5 H4 E5 S4 R5 V5
 * genre: atmospheric · macrostructure: Bento Grid · theme: DESIGN.md locked (Totality Festival)
 * paper: oklch(17% 0.006 95) · accent: oklch(88% 0.18 100) gold
 * nav: N5 floating pill · footer: Ft5 statement
 * contrast: pass (40–41) · nav-footer: pass (42–43) · hero: pass (44) · honest: pass (46)
 * chrome: pass (47) · tokens: pass (48) · responsive: pass (49) · icons: pass (30)
 * mobile: pass (34, 49, 50–57) · slop: 58 / 58 ✓
 * first Hallmark run for this project
 */

/* ── Tokens: Totality Festival Eclipse Dark ── */
:root {
  /* Paper scale — dark canvas, warm-tinted */
  --color-paper:    oklch(17% 0.006 95);
  --color-paper-0:  oklch(13% 0.004 95);
  --color-paper-2:  oklch(22% 0.006 95);
  --color-paper-3:  oklch(30% 0.006 95);
  --color-paper-4:  oklch(26% 0.006 95);

  /* Text */
  --color-ink:      oklch(93% 0.005 280);
  --color-muted:    oklch(84% 0.02 90);
  --color-rule:     oklch(45% 0.02 90);

  /* Accent — corona gold + eclipse cyan */
  --color-accent:     oklch(88% 0.18 100);
  --color-accent-ink: oklch(30% 0.03 95);
  --color-accent-2:   oklch(77% 0.15 210);
  --color-focus:      oklch(65% 0.18 100);

  /* Atmospheric glow tokens */
  --color-glow-gold: oklch(88% 0.15 100 / 0.06);
  --color-glow-cyan: oklch(77% 0.10 210 / 0.05);
  --color-glow-ambient-gold: oklch(88% 0.12 100 / 0.08);
  --color-glow-ambient-cyan: oklch(77% 0.10 210 / 0.05);

  /* Type — DESIGN.md locked, system fallbacks for GFW */
  --font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-body:    Inter, system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Typographic scale — 1.25 major third */
  --text-xs:    0.64rem;
  --text-sm:    0.8rem;
  --text-base:  1rem;
  --text-md:    1.25rem;
  --text-lg:    1.5625rem;
  --text-xl:    1.9531rem;
  --text-2xl:   2.4414rem;
  --text-3xl:   3.0518rem;
  --text-4xl:   3.8147rem;
  --text-display: clamp(2rem, 5vw + 1rem, 4.5rem);

  /* Spacing — 4pt scale */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;

  /* Motion */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long:  420ms;

  /* Borders & radius */
  --rule-hair: 1px;
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 999px;

  /* Z-index stack */
  --z-base:     1;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-sticky-nav: 300;
  --z-modal:    400;
  --z-toast:    500;

  /* Layout */
  --page-gutter: clamp(1rem, 4vw, 1.5rem);
  --container-max: 1280px;
  --nav-height: 52px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--color-ink);
  background: var(--color-paper);
}

body {
  overflow-x: clip;
  min-height: 100dvh;
}

/* ── Atmospheric canvas bloom ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 60% 50% at 30% 20%, var(--color-glow-ambient-gold), transparent),
    radial-gradient(ellipse 50% 40% at 70% 60%, var(--color-glow-ambient-cyan), transparent);
  pointer-events: none;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }