/* ──────────────────────────────────────────────────────────────────────
   LAYER 1 — DESIGN TOKENS
   The vocabulary. Every other layer references these. No raw values
   anywhere else in the system.
   ────────────────────────────────────────────────────────────────────── */

:root {
  /* ── Color: brand ──────────────────────────────────────────────── */
  --color-amber-900: #D67F0D;
  --color-amber-700: #F39519;
  --color-amber-500: #F6B141;
  --color-amber-400: #F6A92C;
  --color-amber-300: #FEC401;
  --color-amber-100: #FFF8E8;
  --color-amber-50:  #FFEED9;

  /* ── Color: neutral ────────────────────────────────────────────── */
  --color-ink:          #101828;  /* highest contrast text */
  --color-ink-soft:     #212329;  /* body headings */
  --color-text:         #353942;  /* body text */
  --color-text-muted:   #515866;
  --color-text-subtle:  #6E778A;
  --color-border:       #EAECF0;
  --color-border-input: #D3DAE0;

  /* ── Color: surface ────────────────────────────────────────────── */
  --color-bg:        #FDF8F6;
  --color-bg-warm:   #F5E6D0;
  --color-surface:   #FFFFFF;

  /* ── Gradients ─────────────────────────────────────────────────── */
  --gradient-primary: linear-gradient(var(--color-amber-700) 0%, var(--color-amber-500) 100%);
  --gradient-cta:     linear-gradient(var(--color-amber-900) 0%, var(--color-amber-300) 100%);
  --gradient-page:    linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-warm) 100%);

  /* ── Typography: families ──────────────────────────────────────── */
  --font-display: "Libre Bodoni", Georgia, serif;
  --font-body:    "DM Sans", system-ui, sans-serif;

  /* ── Typography: sizes (modular scale) ─────────────────────────── */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   16px;
  --text-lg:   17px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  26px;
  --text-4xl:  32px;
  --text-5xl:  36px;
  --text-6xl:  40px;
  --text-7xl:  48px;
  --text-8xl:  72px;

  /* ── Typography: weights ───────────────────────────────────────── */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;

  /* ── Spacing scale (4px base) ──────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  80px;
  --space-10: 100px;
  --space-11: 120px;

  /* ── Layout ────────────────────────────────────────────────────── */
  --page-padding-x: 156px;
  --content-max-narrow: 460px;
  --content-max-wide:   700px;

  /* ── Radius ────────────────────────────────────────────────────── */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-pill: 20px;

  /* ── Shadow ────────────────────────────────────────────────────── */
  --shadow-xs:    0px 1px 2px rgba(33, 35, 41, 0.06);
  --shadow-sm:    0px 1px 2px rgba(33, 35, 41, 0.06), 0px 1px 3px rgba(33, 35, 41, 0.10);
  --shadow-cover: 2px 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-cta:   0px 0px 0px 2px #fff, 0px 0px 0px 4px var(--color-amber-700), 0px 8px 24px rgba(243, 149, 25, 0.25);
  --shadow-cta-flat: 0px 0px 0px 2px #fff, 0px 0px 0px 4px var(--color-amber-700);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.18);
  --shadow-inset-cta: inset 0px 4px 4px rgba(242, 208, 167, 0.80);

  /* ── Motion ────────────────────────────────────────────────────── */
  --ease-quick: 0.15s ease;
  --ease-base:  0.2s ease;
}

/* ── Responsive token overrides ──────────────────────────────────────
   Page padding is a token, so retuning it here reflows every layout
   primitive that references it (.section, .nav, .hero) at once. This
   is the only place breakpoints touch spacing. */
@media (max-width: 1100px) {
  :root { --page-padding-x: var(--space-8); }
}
@media (max-width: 640px) {
  :root { --page-padding-x: var(--space-4); }
}