:root {
  /* Brand Colors */
  --color-primary: #00a1e0;
  --color-secondary: #6c757d;
  --color-accent: #E82E60;      /* hover / price / interactive */
  --color-brand-dark: #222222;  /* heading h2 */
  --color-brand-footer: #222222; /* footer text */

  /* Neutrals */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-text: #212529;
  --color-text-muted: #848484;
  --color-border: #e5e5e5;
  --color-border-light: #f0f0f0;
  --color-bg-light: #fff9e5;
  --color-ribbon-bg: #8C6B68;
  --color-ribbon-text: #ffffff;

  /* Typography */
  --font-body: 'IBM Plex Sans', sans-serif;
  --font-heading: 'Raleway', sans-serif;
  --font-display: 'Nunito Sans', sans-serif;

  /* Font Sizes */
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-base: 14px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 24px;
  --fs-2xl: 32px;
  --fs-3xl: 40px;
  --fs-hero: 46px;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Layout */
  --max-width: 1400px;
  --header-height: 82px;
  --ribbon-height: 36px;

  /* Shadows */
  --shadow-header: rgba(0,0,0,0.13) 1px 0px 34px 0px;
  --shadow-card: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-card-hover: 0 6px 20px rgba(0,0,0,0.15);

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-base: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;
}