/*
 * tokens.css
 * Design tokens — single source of truth for colors, spacing, type, and motion.
 * All other CSS files consume these variables; never hard-code values elsewhere.
 */

:root {
  /* ── Palette ─────────────────────────────────────────── */
  --color-cream:       #f8f4ec;
  --color-cream-2:     #f1ebdf;
  --color-white:       #fffdf9;
  --color-navy:        #1e4535;
  --color-navy-2:      #285a45;
  --color-navy-dark:   #15332a;
  --color-ink:         #1f2a24;
  --color-muted:       #5d6a62;
  --color-gold:        #b48a4f;
  --color-gold-2:      #d4b483;
  --color-gold-soft:   #efe3cc;
  --color-gold-dark:   #a07a43;
  --color-line:        #e6dccb;
  --color-taken:       #efe9de;
  --color-error:       #c0392b;
  --color-success:     #25d366;

  /* ── Shadows ─────────────────────────────────────────── */
  --shadow-green:      rgba(30, 69, 53, 0.55);
  --shadow-green-sm:   rgba(30, 69, 53, 0.45);
  --shadow-green-xs:   rgba(30, 69, 53, 0.35);
  --shadow-gold:       rgba(180, 138, 79, 0.9);

  /* ── Typography ──────────────────────────────────────── */
  --font-serif:        'Cormorant Garamond', Georgia, serif;
  --font-sans:         'Inter', system-ui, sans-serif;
  --font-script:       'Pinyon Script', cursive;

  --text-xs:           0.68rem;
  --text-sm:           0.82rem;
  --text-base:         1rem;
  --text-md:           1.05rem;
  --text-lg:           1.12rem;
  --text-xl:           1.35rem;
  --text-2xl:          1.6rem;
  --text-3xl:          2.1rem;
  --text-4xl:          2.9rem;

  /* ── Spacing ─────────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-9:  36px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ── Layout ──────────────────────────────────────────── */
  --max-width:         1120px;
  --header-height:     70px;
  --radius-sm:         8px;
  --radius-md:         14px;
  --radius-lg:         18px;
  --radius-xl:         26px;
  --radius-pill:       999px;

  /* ── Motion ──────────────────────────────────────────── */
  --ease-out:          cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:       cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --duration-fast:     150ms;
  --duration-base:     250ms;
  --duration-slow:     800ms;
}

/* Reduced motion override */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}