/* ==== Design tokens ====
   Single source of truth. Components must not hardcode hex/px values. */

:root {
  /* Brand */
  --brand: #f9ca00;
  --brand-strong: #e0b400;
  --brand-soft: #fffbeb;
  --brand-soft-border: #fde68a;
  /* Gold dark enough for text on white (4.9:1) — plain #f9ca00 fails contrast */
  --brand-ink: #a16207;

  /* Neutrals (warm stone — pairs with gold) */
  --ink: #0c0a09;
  --ink-2: #44403c;
  --ink-3: #57534e;
  --ink-muted: #78716c;

  --surface: #ffffff;
  --surface-2: #fafaf9;
  --surface-3: #f5f5f4;
  --border: #e7e5e4;
  --border-strong: #d6d3d1;

  --dark-bg: #0c0a09;
  --dark-surface: #1c1917;
  --dark-border: #292524;
  --dark-text: #e7e5e4;
  --dark-muted: #a8a29e;

  /* Semantic */
  --danger: #dc2626;
  --danger-strong: #b91c1c;

  /* Spacing (4/8 rhythm) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  /* Type scale */
  --fs-xs: 13px;
  --fs-sm: 14px;
  --fs-base: 15px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 20px;
  --fs-2xl: 24px;
  --fs-3xl: 28px;
  --fs-4xl: 34px;
  --fs-5xl: 56px;

  --lh-tight: 1.25;
  --lh-heading: 1.35;
  --lh-body: 1.7;

  /* Radii */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-full: 999px;

  /* Elevation — layered, not one flat blur */
  --sh-sm: 0 1px 2px rgba(12, 10, 9, 0.06), 0 1px 3px rgba(12, 10, 9, 0.08);
  --sh-md: 0 2px 4px rgba(12, 10, 9, 0.04), 0 6px 16px rgba(12, 10, 9, 0.08);
  --sh-lg: 0 4px 8px rgba(12, 10, 9, 0.04), 0 16px 40px rgba(12, 10, 9, 0.12);
  --sh-brand: 0 6px 20px rgba(161, 98, 7, 0.28);

  /* Motion */
  --dur-fast: 150ms;
  --dur: 220ms;
  --dur-slow: 320ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* Layers */
  --z-header: 100;
  --z-nav: 110;
  --z-sticky-cta: 120;
  --z-lightbox: 200;

  /* Layout */
  --container: 1140px;
  --container-narrow: 980px;
  --gutter: 20px;
  --header-h: 92px;
}