/**
 * Pearl MG Party Halls - Global Design System Variables
 * Single Source of Truth for all Colors, Typography, Spacing, Radii, Shadows, and Transitions.
 * No hardcoded colors should exist anywhere else in stylesheets.
 */

:root {
  /* ==========================================
     1. BRAND COLORS (Dark Luxury + Gold Theme)
     ========================================== */
  --color-bg: #0A0A0A;
  --color-bg-alt: #121212;
  --color-surface: #171717;
  --color-surface-2: #1F1F1F;
  --color-surface-card: rgba(23, 23, 23, 0.85);
  
  --color-border: rgba(201, 162, 75, 0.25);
  --color-border-subtle: rgba(201, 162, 75, 0.12);
  --color-border-hover: rgba(201, 162, 75, 0.65);
  
  --color-primary: #C9A24B;        /* Main radiant gold */
  --color-primary-light: #E6C97A;  /* Soft champagne gold */
  --color-primary-dark: #9C7A2E;   /* Deep antique bronze gold */
  
  --color-accent: #F5EFE0;         /* Pearl ivory highlight */
  --color-text: #F5EFE0;           /* Clean pearl ivory body */
  --color-text-muted: #A8A08C;     /* Elegant muted warm gray */
  --color-text-dim: #736B5C;       /* Low-priority subtle text */
  
  --color-success: #3FAE6A;        /* Emerald success */
  --color-success-bg: rgba(63, 174, 106, 0.15);
  --color-error: #E05252;          /* Crimson error */
  --color-error-bg: rgba(224, 82, 82, 0.15);
  --color-info: #4A90E2;           /* Sapphire info */

  /* Gradients */
  --gradient-gold: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary-light) 50%, var(--color-primary) 100%);
  --gradient-gold-hover: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 50%, var(--color-primary-dark) 100%);
  --gradient-gold-soft: linear-gradient(180deg, rgba(201, 162, 75, 0.15) 0%, rgba(201, 162, 75, 0.02) 100%);
  --gradient-hero: linear-gradient(180deg, rgba(10, 10, 10, 0.45) 0%, rgba(10, 10, 10, 0.85) 60%, var(--color-bg) 100%);
  --gradient-card: linear-gradient(180deg, rgba(28, 28, 28, 0.75) 0%, rgba(18, 18, 18, 0.95) 100%);
  --gradient-radial-glow: radial-gradient(circle at center, rgba(201, 162, 75, 0.12) 0%, transparent 70%);

  /* ==========================================
     2. TYPOGRAPHY
     ========================================== */
  --font-heading: 'Cinzel', 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  
  /* Fluid Scaled Font Sizes via clamp() */
  --fs-xs: clamp(0.72rem, 0.68rem + 0.2vw, 0.82rem);     /* 11.5px -> 13px */
  --fs-sm: clamp(0.8rem, 0.76rem + 0.25vw, 0.92rem);     /* 12.8px -> 14.7px */
  --fs-base: clamp(0.9rem, 0.85rem + 0.25vw, 1.02rem);   /* 14.4px -> 16.3px */
  --fs-md: clamp(1rem, 0.95rem + 0.35vw, 1.2rem);        /* 16px -> 19.2px */
  --fs-lg: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);      /* 18.4px -> 22.4px */
  --fs-xl: clamp(1.3rem, 1.18rem + 0.7vw, 1.7rem);       /* 20.8px -> 27.2px */
  --fs-2xl: clamp(1.5rem, 1.32rem + 1vw, 2.1rem);        /* 24px -> 33.6px */
  --fs-3xl: clamp(1.75rem, 1.5rem + 1.4vw, 2.6rem);      /* 28px -> 41.6px */
  --fs-4xl: clamp(2rem, 1.7rem + 1.8vw, 3.2rem);         /* 32px -> 51.2px */
  --fs-5xl: clamp(1.85rem, 1.4rem + 2.5vw, 4.2rem);      /* 29.6px on mobile -> 67px on wide desktop */

  /* Font Weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Line Heights */
  --lh-tight: 1.15;
  --lh-heading: 1.25;
  --lh-body: 1.65;
  --lh-loose: 1.85;

  /* Letter Spacing */
  --tracking-tight: -0.02em;
  --tracking-normal: 0em;
  --tracking-wide: 0.05em;
  --tracking-luxury: 0.15em;

  /* ==========================================
     3. SPACING SCALE (8px Base Rhythm)
     ========================================== */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.5rem;   /* 24px */
  --space-6: 2rem;     /* 32px */
  --space-7: 2.5rem;   /* 40px */
  --space-8: 3rem;     /* 48px */
  --space-9: 4rem;     /* 64px */
  --space-10: 6rem;    /* 96px */
  --space-section: clamp(4rem, 3rem + 5vw, 7.5rem);

  /* ==========================================
     4. BORDER RADII
     ========================================== */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-pill: 9999px;
  --radius-circle: 50%;

  /* ==========================================
     5. BOX SHADOWS & GLOW EFFECTS
     ========================================== */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.7);
  --shadow-gold: 0 0 30px rgba(201, 162, 75, 0.25);
  --shadow-gold-lg: 0 0 45px rgba(201, 162, 75, 0.4);
  --shadow-gold-inner: inset 0 0 20px rgba(201, 162, 75, 0.15);
  --shadow-card-hover: 0 20px 45px rgba(0, 0, 0, 0.8), 0 0 25px rgba(201, 162, 75, 0.22);

  /* ==========================================
     6. TRANSITIONS & TIMING
     ========================================== */
  --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);
  --transition-bounce: 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ==========================================
     7. LAYOUT & CONTAINERS
     ========================================== */
  --container: 1200px;
  --container-wide: 1360px;
  --container-narrow: 900px;
  --header-h: 80px;
  --header-h-scrolled: 70px;
  
  /* ==========================================
     8. Z-INDEX SCALE
     ========================================== */
  --z-negative: -1;
  --z-base: 1;
  --z-card: 10;
  --z-header: 100;
  --z-floating: 200;
  --z-drawer: 300;
  --z-modal: 400;
  --z-toast: 500;
}