/* ==========================================================================
   VERO STUDIO NAILS - DESIGN SYSTEM TOKENS & VARIABLES
   Haute Parfumerie & Luxury Nail Atelier Visual Identity
   ========================================================================== */

:root {
  /* Color Palette - Warm Velvet Boudoir & Haute Couture Obsidian */
  --bg-darkest: #09080A;
  --bg-primary: #0E0C0F;
  --bg-secondary: #141115;
  --bg-tertiary: #1C171E;
  --bg-card: rgba(23, 19, 23, 0.82);
  --bg-card-hover: rgba(32, 26, 32, 0.92);
  --bg-glass: rgba(21, 17, 21, 0.72);
  --bg-glass-strong: rgba(14, 11, 14, 0.94);

  /* Gold & Champagne Metallic Accents */
  --gold-primary: #D4AF37;
  --gold-light: #F6E7C4;
  --gold-champagne: #E9D29A;
  --gold-warm: #E2BC72;
  --gold-dark: #9A7B38;
  --gold-shadow: rgba(212, 175, 55, 0.22);
  --gold-glow: 0 0 25px rgba(212, 175, 55, 0.25);
  --gold-glow-strong: 0 0 45px rgba(212, 175, 55, 0.45);
  
  /* Metallic Gradients */
  --gradient-gold: linear-gradient(135deg, #FFF6DC 0%, #E9D29A 25%, #D4AF37 55%, #AA8232 100%);
  --gradient-gold-subtle: linear-gradient(135deg, rgba(246, 231, 196, 0.16) 0%, rgba(212, 175, 55, 0.04) 100%);
  --gradient-dark: linear-gradient(180deg, rgba(14, 12, 15, 0.96) 0%, rgba(9, 8, 10, 0.99) 100%);
  --gradient-card: linear-gradient(145deg, rgba(30, 24, 29, 0.75) 0%, rgba(16, 13, 16, 0.90) 100%);
  --gradient-radial-glow: radial-gradient(circle at 50% 50%, rgba(212, 175, 55, 0.14) 0%, transparent 70%);

  /* Typography Colors */
  --text-white: #FFFFFF;
  --text-primary: #F7F5F0;
  --text-secondary: #B8B5AE;
  --text-muted: #7E7C77;
  --text-gold: #E6CE91;

  /* Borders & Dividers */
  --border-gold-subtle: rgba(212, 175, 55, 0.18);
  --border-gold-medium: rgba(212, 175, 55, 0.35);
  --border-gold-active: rgba(212, 175, 55, 0.8);
  --border-dark: rgba(255, 255, 255, 0.06);

  /* Typography Families - Versailles & Louvre Royal French Heritage */
  --font-brand: 'Cinzel Decorative', 'Cinzel', serif;
  --font-royal: 'Cinzel', 'Playfair Display', serif;
  --font-serif: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-display: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --font-calligraphy: 'Pinyon Script', 'Alex Brush', cursive, sans-serif;
  --font-script: 'Pinyon Script', cursive, sans-serif;
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Spacing Scale */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --space-5xl: 128px;

  /* Radii */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 9999px;

  /* Transitions & Animation Curves */
  --transition-fast: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-base: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 0.6s cubic-bezier(0.16, 1, 0.3, 1);

  /* Z-Index Hierarchy */
  --z-negative: -1;
  --z-elevate: 10;
  --z-header: 100;
  --z-modal-backdrop: 200;
  --z-modal: 210;
  --z-floating: 150;
  --z-toast: 300;
}