/* Design tokens — source of truth is docs/03-design-tokens.md. Do not hardcode any value defined here elsewhere in the codebase. */
:root {
  --color-bg-page: #FAF8F4;
  --color-bg-surface: #FFFFFF;
  --color-ink: #12151A;
  --color-gold: #C9A227;
  --color-red: #BE4246;
  --color-white: #FFFFFF;

  --font-display: 'Fraunces', serif;
  --font-body: 'General Sans', sans-serif;

  --text-hero-size: 64px;      --text-hero-lh: 1.05;
  --text-h1-size: 48px;        --text-h1-lh: 1.1;
  --text-h2-size: 34px;        --text-h2-lh: 1.2;
  --text-h3-size: 22px;        --text-h3-lh: 1.3;
  --text-body-lg-size: 18px;   --text-body-lg-lh: 1.6;
  --text-body-size: 16px;      --text-body-lh: 1.6;
  --text-small-size: 14px;     --text-small-lh: 1.5;

  --text-hero: var(--text-hero-size)/var(--text-hero-lh);
  --text-h1: var(--text-h1-size)/var(--text-h1-lh);
  --text-h2: var(--text-h2-size)/var(--text-h2-lh);
  --text-h3: var(--text-h3-size)/var(--text-h3-lh);
  --text-body-lg: var(--text-body-lg-size)/var(--text-body-lg-lh);
  --text-body: var(--text-body-size)/var(--text-body-lh);
  --text-small: var(--text-small-size)/var(--text-small-lh);

  --space-1: 8px;  --space-2: 16px; --space-3: 24px; --space-4: 32px;
  --space-5: 48px; --space-6: 64px; --space-7: 96px; --space-8: 128px;

  --radius-page: 24px;
  --radius-card: 16px;
  --radius-pill: 999px;
  --radius-sm: 8px;

  --shadow-card: 0 4px 24px rgba(18,21,26,0.08);
  --shadow-float: 0 8px 32px rgba(18,21,26,0.18);
  --shadow-nav: 0 2px 12px rgba(18,21,26,0.10);

  --bp-mobile: 639px;
  --bp-tablet: 1023px;

  --duration-fast: 150ms;
  --duration-base: 300ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 639px) {
  :root {
    --text-hero-size: 40px;   --text-hero-lh: 1.1;
    --text-h1-size: 32px;     --text-h1-lh: 1.15;
    --text-h2-size: 26px;     --text-h2-lh: 1.2;
    --text-h3-size: 20px;     --text-h3-lh: 1.3;
    --text-body-lg-size: 17px;
  }
}