/* Design tokens — the only source of colors, type, spacing, radii and shadows.
   See design/DESIGN_SPEC.md for usage rules and measured contrast ratios. */
:root {
  /* Color */
  --c-navy-950: #081c26;
  --c-navy-900: #0e2e3d;
  --c-navy-800: #163b4c;
  --c-gold-500: #c2a06b; /* never as text on light backgrounds (2.46:1) */
  --c-gold-700: #7a5c2e;
  --c-ink: #1a2730;
  --c-muted: #4a5862;
  --c-on-navy: #ffffff;
  --c-on-navy-muted: #cfc6b6; /* warm sand, 8.4:1 on navy */
  --c-cream-50: #faf7f2;
  --c-cream-100: #f3ede3;
  --c-line: #e4ddd1;
  --c-white: #ffffff;
  --c-whatsapp: #0f7a55;
  --c-whatsapp-hover: #0b6e4f;
  --c-error: #b3261e;

  /* Typography */
  --font-heading: "Poppins", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --fs-display: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);
  --fs-h2: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  --fs-h3: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  --fs-lead: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.875rem;
  --fs-xs: 0.8125rem;
  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-body: 1.65;
  --measure: 68ch;

  /* Spacing (4px base) */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;

  /* Layout */
  --container: 75rem;
  --gutter: 1rem;
  --header-h: 4rem;

  /* Shape & depth */
  --r-sm: 8px;
  --r-md: 20px;
  --r-pill: 999px;
  --shadow-1: 0 1px 2px rgb(122 92 46 / 0.06), 0 10px 28px rgb(122 92 46 / 0.10);
  --shadow-header: 0 1px 0 var(--c-line), 0 6px 18px rgb(122 92 46 / 0.07);
  --glow-warm: radial-gradient(ellipse 60% 70% at 88% 10%, rgb(194 160 107 / 0.20), transparent 70%), radial-gradient(ellipse 50% 60% at 0% 100%, rgb(194 160 107 / 0.10), transparent 70%);

  /* Motion */
  --t-fast: 150ms ease-out;
  --t-base: 250ms ease-out;

  /* Focus: navy ring on light surfaces (14:1), gold ring on navy surfaces (5.8:1) */
  --focus-ring: 0 0 0 2px var(--c-white), 0 0 0 5px var(--c-navy-900);
  --focus-ring-dark: 0 0 0 2px var(--c-navy-900), 0 0 0 5px var(--c-gold-500);

  /* Status & depth extras */
  --c-pending-bg: #fff4e5;
  --c-cream-100-clear: rgb(243 237 227 / 0);
  --c-cream-100-soft: rgb(243 237 227 / 0.6);
  --c-line-on-navy: rgb(255 255 255 / 0.1);
  --shadow-2: 0 24px 60px rgb(0 0 0 / 0.25);
  --shadow-fab: 0 8px 24px rgb(0 0 0 / 0.25);
}

@media (min-width: 640px) {
  :root { --gutter: 1.5rem; }
}

@media (min-width: 960px) {
  :root { --gutter: 2rem; --header-h: 4.5rem; }
}