:root {
  /* Brand Colors */
  --color-navy:   #0d1f3c;
  --color-teal:   #0a7a8f;
  --color-coral:  #ff6b35;
  --color-cream:  #faf7f2;
  --color-white:  #ffffff;
  --color-text:   #1a1a2e;
  --color-muted:  #6b7280;
  --color-border: rgba(10, 122, 143, 0.18);
  --color-vegan:  #3a9d5d;

  /* Status Colors */
  --status-new:          #2563eb;
  --status-new-bg:       #dbeafe;
  --status-available:    #16a34a;
  --status-available-bg: #dcfce7;
  --status-limited:      #d97706;
  --status-limited-bg:   #fef3c7;
  --status-unavail:      #6b7280;
  --status-unavail-bg:   #f3f4f6;

  /* Typography */
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-lg:   1.125rem;
  --fs-xl:   1.25rem;
  --fs-2xl:  1.5rem;
  --fs-3xl:  1.875rem;
  --fs-4xl:  2.25rem;
  --fs-hero: clamp(2.2rem, 5vw, 3.75rem);

  /* Spacing */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  /* Borders */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(13,31,60,0.08);
  --shadow-md: 0 4px 16px rgba(13,31,60,0.12);
  --shadow-lg: 0 8px 32px rgba(13,31,60,0.18);

  /* Transitions */
  --t-fast: 150ms ease;
  --t-base: 250ms ease;
  --t-slow: 400ms ease;

  /* Layout */
  --container-max: 1200px;
  --container-pad: clamp(1rem, 4vw, 2.5rem);
  --nav-height: 68px;

  /* Z-index */
  --z-nav:     100;
  --z-fab:     200;
  --z-overlay: 300;
  --z-cart:    400;
}