/* Cosmic Reading — design tokens. Premium editorial storefront (approved prototype).
   Deep navy / warm cream / muted gold. Single source of truth: edit here only. */
:root {
  /* Deep navy */
  --navy-950: #0a0e17;
  --navy-900: #0f1522;
  --navy-850: #131b2b;
  --navy-800: #1a2438;
  --navy-700: #263252;
  --navy-600: #364569;

  /* Warm cream / beige */
  --cream-50:  #fbf8f2;
  --cream-100: #f6f1e6;
  --cream-200: #eee5d2;
  --cream-300: #e2d4b8;
  --cream-500: #a9a496;

  /* Legacy aliases (kept so already-written templates using the old beige-*
     names keep resolving to the same approved palette). */
  --beige-50: var(--cream-50);
  --beige-100: var(--cream-100);
  --beige-200: var(--cream-200);
  --beige-300: var(--cream-300);

  /* Muted gold (accent only — never a full background) */
  --gold-300: #e3cb92;
  --gold-500: #c19a4e;
  --gold-600: #a67f3a;
  --gold-700: #83642c;
  --gold-glow: rgba(193,154,78,0.35);

  /* Text */
  --ink-900: #14161c;
  --ink-700: #3c3e46;
  --ink-500: #6b6d76;

  /* Surfaces */
  --surface-light: var(--cream-50);
  --surface-light-alt: var(--cream-100);
  --surface-card: #ffffff;
  --surface-dark: var(--navy-950);
  --surface-dark-alt: var(--navy-900);
  --surface-dark-card: var(--navy-800);

  /* Semantic */
  --border-light: rgba(20,22,28,0.10);
  --border-light-strong: rgba(20,22,28,0.14);
  --line-on-light: rgba(20,22,28,0.12);
  --border-dark: rgba(246,241,230,0.12);
  --border-dark-strong: rgba(246,241,230,0.22);
  --line-on-dark: rgba(246,241,230,0.14);
  --line-on-dark-strong: rgba(246,241,230,0.26);
  --focus-ring: var(--gold-600);
  --status-active: #4f7a5c;
  --status-soon: var(--gold-600);
  --danger: #a3453a;

  /* Typography */
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "URW Palladio L", P052, Georgia, serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --fs-h1: clamp(2.15rem, 1.6rem + 2.2vw, 3.6rem);
  --fs-h2: clamp(1.7rem, 1.4rem + 1.3vw, 2.5rem);
  --fs-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.55rem);
  --fs-lead: clamp(1.05rem, 1rem + 0.3vw, 1.25rem);
  --fs-subhead: clamp(1.05rem, .95rem + .5vw, 1.3rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.75rem;

  --lh-tight: 1.2;
  --lh-heading: 1.25;
  --lh-body: 1.65;

  --ls-eyebrow: 0.14em;

  /* Spacing (8pt-derived) */
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.25rem;
  --space-6: 3rem;
  --space-7: 4rem;
  --space-8: 5.5rem;
  --space-9: 8rem;

  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  --shadow-card: 0 2px 8px rgba(10,14,23,.06), 0 20px 50px -24px rgba(10,14,23,.22);
  --shadow-elevated: 0 30px 80px -20px rgba(10,14,23,.55);
  --shadow-soft: var(--shadow-card);
  --shadow-deep: var(--shadow-elevated);
  --shadow-gold: 0 18px 46px -14px rgba(193,154,78,.45);

  --ease: cubic-bezier(.4,0,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-soft: var(--ease);
  --dur-fast: 180ms;
  --dur-med: 340ms;
  --dur-1: var(--dur-fast);
  --dur-2: var(--dur-med);
  --dur-3: 620ms;

  --container-max: 1240px;
  --container-narrow: 760px;
  --container-prose: 680px;
  --container: var(--container-max);
}

/* Mobile-first spacing compression — the large editorial spacing tokens
   (5-8) are compressed on small screens so section gaps land in the
   32-48px range and cards get 16-24px internal padding, instead of the
   desktop-scale ~48-88px gaps stacking up into a very tall mobile page.
   1-4 stay the same: they were already compact. Desktop (>640px) is
   untouched — the editorial spacing there is intentional. */
@media (max-width: 640px) {
  :root {
    --space-5: 1.25rem;  /* 20px, was 36px */
    --space-6: 1.5rem;   /* 24px, was 48px — drives .section padding-block */
    --space-7: 2rem;     /* 32px, was 64px */
    --space-8: 1.5rem;   /* 24px, was 88px */
  }
}