/* 🌙 CSS Variables - Système de Design Lunaire */
:root {
  /* ===== COULEURS PRINCIPALES ===== */
  
  /* Palette Nuit Mystique */
  --color-night-sky: #0F0F10;
  --color-night-sky-light: #1A1A1F;
  --color-night-surface: #0F0F10;
  
  /* Palette Or Lunaire */
  --color-gold-primary: #FFD966;
  --color-gold-secondary: #D4AF37;
  --color-gold-accent: #B8860B;
  --color-gold-light: #FFE8A3;
  --color-gold-dark: #9C6F09;
  
  /* Palette Texte */
  --color-text-cream: #EDE7D9;
  --color-text-gold: #FFE8A3;
  --color-text-muted: rgba(237, 231, 217, 0.7);
  --color-text-disabled: rgba(237, 231, 217, 0.4);
  
  /* Palette Bleu Accent */
  --color-blue-accent: #0B3B66;
  --color-blue-hover: #0A4A7A;
  --color-blue-light: #0D4B7F;
  
  /* ===== GRADIENTS ===== */
  --gradient-gold: linear-gradient(135deg, var(--color-gold-primary), var(--color-gold-secondary), var(--color-gold-accent));
  --gradient-night: linear-gradient(135deg, var(--color-night-sky), #1A1A2E);
  --gradient-moon-halo: radial-gradient(circle at center, rgba(255, 217, 102, 0.1) 0%, transparent 70%);
  --gradient-glass: linear-gradient(135deg, rgba(15, 15, 16, 0.8), rgba(26, 26, 31, 0.9));
  
  /* ===== OMBRES ===== */
  --shadow-gold: 0 8px 32px rgba(255, 217, 102, 0.15);
  --shadow-gold-lg: 0 12px 40px rgba(255, 217, 102, 0.25);
  --shadow-night: 0 4px 20px rgba(0, 0, 0, 0.3);
  --shadow-card: 0 8px 32px rgba(255, 217, 102, 0.1);
  --shadow-glow: 0 0 20px rgba(255, 217, 102, 0.3);
  --shadow-button: 0 4px 12px rgba(0, 0, 0, 0.15);
  
  /* ===== BORDURES ===== */
  --border-gold: 1px solid rgba(255, 217, 102, 0.3);
  --border-gold-thick: 2px solid rgba(255, 217, 102, 0.4);
  --border-glass: 1px solid rgba(255, 255, 255, 0.1);
  --border-input: 1px solid rgba(255, 217, 102, 0.2);
  
  /* ===== EFFETS VISUELS ===== */
  --glass-effect: rgba(15, 15, 16, 0.8);
  --backdrop-blur: blur(12px);
  --backdrop-blur-light: blur(8px);
  
  /* ===== TYPOGRAPHIE ===== */
  --font-family-primary: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-family-display: 'Georgia', serif;
  
  /* Tailles de police */
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-size-xl: 1.25rem;    /* 20px */
  --font-size-2xl: 1.5rem;    /* 24px */
  --font-size-3xl: 1.875rem;  /* 30px */
  --font-size-4xl: 2.25rem;   /* 36px */
  --font-size-5xl: 3rem;      /* 48px */
  --font-size-6xl: 4rem;      /* 64px */
  
  /* Poids de police */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* Hauteurs de ligne */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  
  /* ===== ESPACEMENT ===== */
  --space-xs: 0.25rem;   /* 4px */
  --space-sm: 0.5rem;    /* 8px */
  --space-md: 1rem;      /* 16px */
  --space-lg: 1.5rem;    /* 24px */
  --space-xl: 2rem;      /* 32px */
  --space-2xl: 3rem;     /* 48px */
  --space-3xl: 4rem;     /* 64px */
  --space-4xl: 6rem;     /* 96px */
  
  /* ===== BORDER RADIUS ===== */
  --radius-sm: 0.375rem;   /* 6px */
  --radius-md: 0.5rem;     /* 8px */
  --radius-lg: 0.75rem;    /* 12px */
  --radius-xl: 1rem;       /* 16px */
  --radius-2xl: 1.5rem;    /* 24px */
  --radius-3xl: 2rem;      /* 32px */
  --radius-full: 50%;
  
  /* ===== ANIMATIONS ===== */
  --duration-fast: 0.15s;
  --duration-normal: 0.3s;
  --duration-slow: 0.5s;
  --duration-slower: 0.8s;
  
  /* Courbes d'animation */
  --ease-linear: linear;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  
  /* ===== Z-INDEX ===== */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-modal: 1030;
  --z-popover: 1040;
  --z-tooltip: 1050;
  
  /* ===== POINTS DE RUPTURE ===== */
  --breakpoint-mobile: 480px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1024px;
  --breakpoint-large: 1200px;
  
  /* ===== COMPOSANTS SPÉCIFIQUES ===== */
  
  /* Header */
  --header-height: 80px;
  --header-bg: var(--glass-effect);
  --header-border: var(--border-gold);
  
  /* Cartes */
  --card-bg: var(--glass-effect);
  --card-border: var(--border-gold);
  --card-shadow: var(--shadow-card);
  --card-padding: var(--space-2xl);
  
  /* Boutons */
  --button-primary-bg: var(--gradient-gold);
  --button-primary-text: var(--color-night-sky);
  --button-primary-shadow: var(--shadow-gold);
  --button-border-radius: 50px;
  
  /* Formulaires */
  --input-bg: rgba(255, 255, 255, 0.05);
  --input-border: var(--border-input);
  --input-focus-border: var(--color-gold-primary);
  --input-focus-shadow: 0 0 0 3px rgba(255, 217, 102, 0.1);
}

/* 🌙 Classes utilitaires basées sur les variables CSS */
.glass-effect {
  background: var(--glass-effect);
  backdrop-filter: var(--backdrop-blur);
}

.gradient-text {
  background: var(--gradient-gold);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.border-gold {
  border: var(--border-gold);
}

.shadow-gold {
  box-shadow: var(--shadow-gold);
}

.text-gold {
  color: var(--color-text-gold);
}

.bg-night {
  background-color: var(--color-night-sky);
}

/* 🌙 Media Queries pour les variables responsives */
@media (max-width: 768px) {
  :root {
    --font-size-6xl: 2.5rem;
    --font-size-5xl: 2rem;
    --font-size-4xl: 1.75rem;
    --card-padding: var(--space-xl);
    --header-height: 70px;
  }
}

@media (max-width: 480px) {
  :root {
    --font-size-6xl: 2rem;
    --font-size-5xl: 1.75rem;
    --font-size-4xl: 1.5rem;
    --card-padding: var(--space-lg);
  }
}

/* 🌙 Mode sombre par défaut (optimisé pour notre thème) */
@media (prefers-color-scheme: dark) {
  :root {
    /* Ajustements spécifiques pour le mode sombre natif */
    --color-night-sky: #0A0A0B;
    --glass-effect: rgba(10, 10, 11, 0.9);
  }
}

/* 🌙 Support des navigateurs plus anciens */
@supports not (backdrop-filter: blur(12px)) {
  .glass-effect {
    background: rgba(15, 15, 16, 0.95);
  }
}

/* 🌙 Impression */
@media print {
  :root {
    --color-night-sky: #FFFFFF;
    --color-text-cream: #000000;
    --gradient-gold: #000000;
    --shadow-gold: none;
  }
  
  .glass-effect {
    background: transparent;
    backdrop-filter: none;
  }
}