/* Design tokens — single source of truth for visual values.
   Pulled from design-system.md. Do not hardcode colors/spacing elsewhere. */

:root {
  /* ---------- Color ---------- */
  --color-primary: #E04F67;
  --color-primary-hover: #C53E52;
  --color-primary-active: #A03242;

  --color-cream: #FDF7AC;
  --color-cream-active: #F5E580;
  --color-gold: #ACCE;

  --color-text: #333333;
  --color-text-secondary: #666666;
  --color-text-muted: #888888;
  --color-text-tertiary: #C6C6C6;
  --color-text-light: #8C8C8C;
  --color-text-on-dark: #FFFFFF;

  --color-bg: #FFFFFF;
  --color-bg-soft: #F5F5F5;
  --color-bg-dark: #1A1A1A;
  --color-overlay: rgba(0, 0, 0, 0.5);

  --color-border: #C6C6C6;
  --color-border-input: #CCCCCC;
  --color-border-subtle: #DDDDDD;

  /* ---------- Typography ---------- */
  --font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-display: 30px;
  --fs-h2: 30px;
  --fs-h3: 20px;
  --fs-h4: 13px;
  --fs-body: 16px;
  --fs-body-sm: 13px;
  --fs-button: 14px;
  --fs-button-sm: 12px;
  --fs-input: 12px;
  --fs-caption: 11px;
  --fs-nav: 13px;
  --fs-search: 32px;

  --lh-tight: 33px;
  --lh-h3: 22px;
  --lh-h4: 14.3px;
  --lh-body: 20px;
  --lh-input: 17.14px;

  --fw-regular: 400;
  --fw-bold: 700;

  /* ---------- Spacing (4px base) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-8: 32px;
  --space-15: 60px;
  --space-21: 84px;
  --space-34: 136px;
  --space-36: 144px;

  /* ---------- Radius ---------- */
  --radius: 3px;
  --radius-circle: 50%;

  /* ---------- Shadows ---------- */
  --shadow-card-hover: rgba(0, 0, 0, 0.1) 0 4px 12px 0;
  --shadow-badge: rgba(0, 0, 0, 0.2) 0 2px 8px 0;
  --shadow-dropdown: rgba(0, 0, 0, 0.176) 0 6px 12px 0;
  --shadow-overlay: rgba(0, 0, 0, 0.3) 0 12px 24px 0;
  --shadow-input-inset: rgba(0, 0, 0, 0.075) 0 1px 1px 0 inset;
  --shadow-input-focus: 0 0 0 3px rgba(224, 79, 103, 0.1) inset, rgba(0, 0, 0, 0.075) 0 1px 1px 0 inset;
  --shadow-button-active: inset 0 2px 4px rgba(0, 0, 0, 0.2);

  /* ---------- Layout ---------- */
  --container-max: 1200px;
  --container-pad-desktop: 20px;
  --container-pad-tablet: 20px;
  --container-pad-mobile: 20px;

  --grid-gap-desktop: 24px;
  --grid-gap-tablet: 20px;
  --grid-gap-mobile: 16px;

  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
}