:root {
  /* ==========================================================================
     AUREVIA DENTAL CLINIC — DESIGN TOKENS
     Warm ivory / off-white + deep charcoal + subtle Aurevia gold
     ========================================================================== */

  /* Surface & Canvas Colors (Light Mode Default) */
  --color-canvas: #FAF8F5;
  --color-surface-white: #FFFFFF;
  --color-surface-card: #FFFFFF;
  --color-surface-cream: #F5EFE6;
  --color-surface-subtle: #F0E9DF;
  --color-surface-dark: #181513;
  --color-surface-dark-card: #221E1A;

  /* Typography Colors */
  --color-text-main: #181513;
  --color-text-body: #3D3631;
  --color-text-muted: #726860;
  --color-text-light: #9B9187;
  --color-text-inverse: #FFFFFF;
  --color-text-inverse-muted: #D5CEC7;

  /* Aurevia Gold Accents (Strictly restrained) */
  --color-gold-primary: #C5A059;
  --color-gold-light: #D4B36D;
  --color-gold-soft: #F4EDE0;
  --color-gold-darker: #9A7730;
  --color-gold-border: rgba(197, 160, 89, 0.28);
  --color-gold-border-focus: rgba(197, 160, 89, 0.75);
  --color-gold-glow: rgba(197, 160, 89, 0.16);

  /* Functional / Trust Colors */
  --color-border-subtle: #E8E2D9;
  --color-border-hairline: rgba(24, 21, 19, 0.08);
  --color-border-dark: #2F2A25;
  --color-whatsapp: #25D366;
  --color-whatsapp-dark: #1EBE5B;
  --color-star-gold: #F59E0B;

  /* Adaptive Header & Hero Gradients */
  --header-bg: rgba(250, 248, 245, 0.94);
  --header-bg-scrolled: rgba(250, 248, 245, 0.98);
  --hero-grad-left-0: rgba(250, 248, 245, 0.94);
  --hero-grad-left-28: rgba(250, 248, 245, 0.82);
  --hero-grad-left-45: rgba(250, 248, 245, 0.35);
  --hero-grad-mobile-0: rgba(250, 248, 245, 0.98);
  --hero-grad-mobile-42: rgba(250, 248, 245, 0.93);
  --hero-grad-mobile-58: rgba(250, 248, 245, 0.50);
  --hero-grad-mobile-68: rgba(250, 248, 245, 0.15);

  /* Typography Fonts */
  --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Fluid Typography Scale */
  --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --text-sm: clamp(0.8125rem, 0.78rem + 0.18vw, 0.875rem);
  --text-base: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
  --text-lg: clamp(1.0625rem, 1.02rem + 0.25vw, 1.15rem);
  --text-xl: clamp(1.25rem, 1.18rem + 0.4vw, 1.375rem);
  --text-2xl: clamp(1.5rem, 1.38rem + 0.6vw, 1.75rem);
  --text-3xl: clamp(1.85rem, 1.65rem + 1vw, 2.25rem);
  --text-4xl: clamp(2.35rem, 2rem + 1.6vw, 3rem);
  --text-5xl: clamp(2.85rem, 2.4rem + 2.2vw, 3.85rem);

  /* Spacing Scale */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */
  --space-32: 8rem;     /* 128px */

  /* Containers & Layout Bounds */
  --container-max: 1240px;
  --container-wide: 1360px;
  --container-narrow: 840px;
  --container-gutter: clamp(1rem, 4vw, 2.5rem);

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

  /* Shadows (Subtle, tactile, non-excessive) */
  --shadow-xs: 0 1px 2px rgba(24, 21, 19, 0.05);
  --shadow-subtle: 0 1px 3px rgba(24, 21, 19, 0.04), 0 1px 2px rgba(24, 21, 19, 0.02);
  --shadow-card: 0 4px 16px rgba(24, 21, 19, 0.05), 0 1px 2px rgba(24, 21, 19, 0.03);
  --shadow-hover: 0 8px 24px rgba(24, 21, 19, 0.08), 0 2px 4px rgba(24, 21, 19, 0.03);
  --shadow-modal: 0 20px 48px rgba(24, 21, 19, 0.16), 0 4px 12px rgba(24, 21, 19, 0.08);

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 150ms var(--ease-out);
  --transition-normal: 250ms var(--ease-out);
  --transition-slow: 400ms var(--ease-out);

  /* Z-Index Hierarchy */
  --z-base: 1;
  --z-sticky: 100;
  --z-header: 500;
  --z-drawer: 600;
  --z-assistant: 700;
  --z-modal-backdrop: 800;
  --z-modal: 900;
  --z-toast: 1000;
  /* Default Brand Primary Color */
  --color-primary: #181513;
}

/* ==========================================================================
   DARK THEME SYSTEM (Charcoal / Warm Black / Muted Gold / Soft Grey)
   Preserves Aurevia luxury editorial aesthetic with high contrast & zero neon.
   ========================================================================== */
[data-theme="dark"] {
  /* Surfaces: Deep Rich Charcoal Page Canvas + Elevated Card Surfaces */
  --color-canvas: #100E0D;
  --color-surface-white: #1A1715;
  --color-surface-card: #1E1B18;
  --color-surface-cream: #141210;
  --color-surface-subtle: #24201C;
  --color-surface-dark: #0A0908;
  --color-surface-dark-card: #1E1B18;

  /* Typography: Warm Off-White & Soft Muted Grey */
  --color-text-main: #F5F2EC;          /* Primary: Warm off-white / ivory */
  --color-text-body: #D4CDC5;          /* Secondary: Soft warm grey */
  --color-text-muted: #A8A096;         /* Tertiary: Muted grey, clearly readable */
  --color-text-light: #8E867D;         /* Subtle tertiary */
  --color-text-inverse: #100E0D;
  --color-text-inverse-muted: #D4CDC5; /* Warm grey on dark backgrounds */
  --color-primary: #F5F2EC;

  /* Aurevia Gold Accents in Dark Mode */
  --color-gold-primary: #D4B36D;
  --color-gold-light: #E8D5AA;
  --color-gold-soft: #262017;
  --color-gold-darker: #D4B36D;
  --color-gold-border: rgba(212, 179, 109, 0.35);
  --color-gold-border-focus: rgba(212, 179, 109, 0.85);
  --color-gold-glow: rgba(212, 179, 109, 0.22);

  /* Functional / Borders */
  --color-border-subtle: #2E2823;
  --color-border-hairline: rgba(245, 242, 236, 0.10);
  --color-border-dark: #3A332C;
  --color-border: #332D27;
  --color-whatsapp: #25D366;
  --color-whatsapp-dark: #25D366;
  --color-star-gold: #F59E0B;

  /* Adaptive Header & Hero Gradients */
  --header-bg: rgba(16, 14, 13, 0.94);
  --header-bg-scrolled: rgba(16, 14, 13, 0.98);
  --hero-grad-left-0: rgba(16, 14, 13, 0.95);
  --hero-grad-left-28: rgba(16, 14, 13, 0.84);
  --hero-grad-left-45: rgba(16, 14, 13, 0.38);
  --hero-grad-mobile-0: rgba(16, 14, 13, 0.98);
  --hero-grad-mobile-42: rgba(16, 14, 13, 0.94);
  --hero-grad-mobile-58: rgba(16, 14, 13, 0.48);
  --hero-grad-mobile-68: rgba(16, 14, 13, 0.16);

  /* Dark Shadows */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-card: 0 4px 18px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-hover: 0 10px 32px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.4);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.85), 0 4px 16px rgba(0, 0, 0, 0.5);
}