/* ============================================
   Moonjourn Design Tokens
   Mirrors src/theme/colors.ts (Astral Curator)
   ============================================ */

:root {
  /* Surfaces */
  --bg: #121416;
  --surface-low: #1a1c1e;
  --surface: #202224;
  --surface-high: #282a2c;
  --surface-highest: #323436;
  --surface-lowest: #0e1012;

  /* Brand */
  --gold: #e9c176;
  --gold-light: #ffdea5;
  --gold-dark: #c5a059;
  --lavender: #c0c4ea;
  --lavender-deep: #9a9ec0;
  --indigo: #3f4564;

  /* Text - never pure white */
  --text: #e2e2e5;
  --text-muted: #d1c5b4;
  --text-dim: #8a8c90;
  --text-faint: #6a6c70;

  /* Borders / hairlines */
  --hairline: rgba(233, 193, 118, 0.18);
  --hairline-cool: rgba(192, 196, 234, 0.14);
  --border-subtle: #3a3c3e;

  /* Glows */
  --glow-gold: rgba(233, 193, 118, 0.18);
  --glow-gold-soft: rgba(233, 193, 118, 0.08);
  --glow-lavender: rgba(192, 196, 234, 0.12);

  /* Glass */
  --glass: rgba(26, 28, 30, 0.72);
  --glass-strong: rgba(18, 20, 22, 0.88);

  /* Typography */
  --font-display: 'Cormorant Garamond', 'Newsreader', Georgia, serif;
  --font-body: 'Inter', 'Manrope', -apple-system, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Fluid type scale - generous, editorial */
  --fs-eyebrow: clamp(0.72rem, 0.65rem + 0.35vw, 0.84rem);
  --fs-body: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --fs-lead: clamp(1.125rem, 1rem + 0.6vw, 1.4rem);
  --fs-h6: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
  --fs-h5: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --fs-h4: clamp(1.6rem, 1.3rem + 1.4vw, 2.25rem);
  --fs-h3: clamp(2rem, 1.5rem + 2vw, 3.25rem);
  --fs-h2: clamp(2.6rem, 1.8rem + 3.2vw, 4.75rem);
  --fs-h1: clamp(3.2rem, 2rem + 5vw, 7.25rem);
  --fs-display: clamp(4rem, 2rem + 7.5vw, 10rem);

  /* Spacing - 8px base, tight to spacious */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;
  --sp-11: 160px;
  --sp-12: 200px;

  /* Containers */
  --container-narrow: 820px;
  --container-standard: 1380px;
  --container-wide: 1680px;
  --container-edge: clamp(1.25rem, 3vw, 2.5rem);

  /* Radii */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 24px 60px -28px rgba(0, 0, 0, 0.7);
  --shadow-glow: 0 0 60px -10px var(--glow-gold);
  --shadow-deep: 0 40px 100px -40px rgba(0, 0, 0, 0.95);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 220ms;
  --dur-base: 420ms;
  --dur-slow: 800ms;

  /* Layout */
  --nav-h: 72px;
}

@media (max-width: 768px) {
  :root {
    --sp-9: 72px;
    --sp-10: 96px;
    --sp-11: 120px;
  }
}