:root {
  /* Bang & Olufsen Retail Brand Guideline palette */
  --color-black: #191817;
  --color-anthracite: #191817;
  --color-dark-gray: #766E68;
  --color-medium-gray: #766E68;
  --color-body-text: #191817;
  --color-text-light: #766E68;
  --color-white: #FCFAEE;
  --color-beo-white: #FCFAEE;
  --color-beo-grey-10: #766E68;
  --color-beo-grey-5: #ACA69F;
  --color-beo-grey-1-5: #EBE8E5;
  --color-beo-grey-1-25: #F5F4F3;
  --color-off-white: #F5F4F3;
  --color-cream: #EBE8E5;
  --color-light-gray: #D7D2CB;
  
  /* Compatibility aliases: accents remain inside the approved warm-grey range. */
  --color-accent: #766E68;
  --color-accent-light: #ACA69F;
  --color-accent-dark: #191817;
  --color-future-blue: #040DB1;
  --gradient-accent: linear-gradient(90deg, #191817, #191817);
  --gradient-text: linear-gradient(90deg, #191817, #191817);
  
  /* Glass Effect - Darker, more solid for B&O style */
  --glass-bg: #191817;
  --glass-border: 1px solid #766E68;
  --glass-blur: blur(20px);
  --glass-bg-light: rgba(255, 255, 255, 0.05);
  
  /* Hero Animated Gradient - Deep, moody, neutral monochrome shift (NO blue/purple) */
  --gradient-hero: linear-gradient(-45deg, #191817, #766E68, #191817, #D7D2CB, #191817);
  --gradient-hero-size: 300% 300%;
  
  /* Overlays */
  --color-overlay: rgba(25, 24, 23, 0.5);
  --color-overlay-strong: rgba(25, 24, 23, 0.85);

  /* Add the licensed BeoSupreme webfonts to assets/fonts before production. */
  --font-family: 'BeoSupreme', 'Helvetica Neue', Arial, sans-serif;
  --font-size-display: clamp(3rem, 6vw, 5.75rem);
  --font-size-h1: clamp(2.4rem, 4.2vw, 4.25rem);
  --font-size-h2: clamp(2rem, 3.3vw, 3.2rem);
  --font-size-h3: clamp(1.4rem, 2.5vw, 2rem);
  --font-size-h4: clamp(1.1rem, 1.5vw, 1.4rem);
  --font-size-body: 1rem;
  --font-size-body-lg: 1.15rem;
  --font-size-small: 0.875rem;
  --font-size-xs: 0.75rem;
  --font-size-eyebrow: 0.7rem;
  --line-height-body: 1.75;
  --line-height-heading: 1.15;
  --letter-spacing-eyebrow: 0.25em;
  --letter-spacing-button: 0.01em;
  --letter-spacing-wide: 0.18em;
  --font-weight-extralight: 200;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 6rem;
  --space-2xl: 8rem;
  --space-section: clamp(6rem, 10vw, 12rem);

  /* Layout */
  --navbar-height: 73px;
  --container-max: 1440px;
  --container-content: 1200px;
  --container-narrow: 720px;
  --container-padding: clamp(1.5rem, 4vw, 3rem);

  /* Borders & Radius - Sharper edges */
  --border-subtle: 1px solid #766E68;
  --border-light: 1px solid #D7D2CB;
  --border-accent: 1px solid var(--color-accent);
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-full: 9999px;

  /* Shadows - Minimalist, no strong colors */
  --shadow-subtle: none;
  --shadow-card: none;
  --shadow-glow: none;
  --shadow-glow-strong: none;

  /* Transitions - Smooth Modern Easings */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-fast: 250ms var(--ease-out-expo);
  --transition-default: 400ms var(--ease-out-expo);
  --transition-slow: 700ms var(--ease-out-expo);
  --transition-extra-slow: 1000ms var(--ease-out-expo);

  /* Z-index */
  --z-grain: 9999;
  --z-navbar: 1000;
  --z-overlay: 900;
  --z-sticky-cta: 800;
}