/**
 * COACH APA'R - DESIGN SYSTEM
 * Palette Chaude "Énergie & Vitalité"
 * Version 2.0 - Refonte Complète
 */

/* ============================================
   VARIABLES CSS - PALETTE CHAUDE
   ============================================ */

:root {
  /* Couleurs Principales - Palette Chaude */
  --color-primary: #FF6B35;          /* Orange Énergie */
  --color-primary-light: #FF8F5C;    /* Orange Clair */
  --color-primary-dark: #E55A2B;     /* Orange Foncé */

  --color-secondary: #FF9F68;        /* Corail Chaleureux */
  --color-secondary-light: #FFB88C;  /* Corail Clair */
  --color-secondary-dark: #E68A55;   /* Corail Foncé */

  --color-accent: #E63946;           /* Rouge Terracotta */
  --color-accent-light: #FF5761;     /* Rouge Clair */
  --color-accent-dark: #CC2F3A;      /* Rouge Foncé */

  --color-success: #4CAF50;          /* Vert Chaud */
  --color-success-light: #66BB6A;    /* Vert Clair */
  --color-success-dark: #388E3C;     /* Vert Foncé */

  --color-highlight: #FFC107;        /* Jaune Ambré */
  --color-highlight-light: #FFD54F;  /* Jaune Clair */
  --color-highlight-dark: #FFA000;   /* Jaune Foncé */

  /* Couleurs Neutres */
  --color-dark: #0F0E0E;             /* Noir Profond */
  --color-dark-soft: #1A1818;        /* Noir Doux */
  --color-gray-900: #2D2A2A;
  --color-gray-800: #3F3B3B;
  --color-gray-700: #5C5757;
  --color-gray-600: #787272;
  --color-gray-500: #948E8E;
  --color-gray-400: #B1AAAA;
  --color-gray-300: #CCC7C7;
  --color-gray-200: #E8E4E4;
  --color-gray-100: #F4F2F2;

  --color-light: #FFF8F3;            /* Blanc Cassé Chaud */
  --color-white: #FFFFFF;

  /* Dégradés */
  --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  --gradient-secondary: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-primary) 100%);
  --gradient-warm: linear-gradient(135deg, #FF6B35 0%, #FF9F68 50%, #FFC107 100%);
  --gradient-sunset: linear-gradient(135deg, #E63946 0%, #FF6B35 50%, #FFC107 100%);
  --gradient-radial: radial-gradient(circle at center, var(--color-primary) 0%, var(--color-accent) 100%);

  /* Ombres - Palette Chaude */
  --shadow-sm: 0 2px 8px rgba(255, 107, 53, 0.08);
  --shadow-md: 0 4px 16px rgba(255, 107, 53, 0.12);
  --shadow-lg: 0 8px 32px rgba(255, 107, 53, 0.16);
  --shadow-xl: 0 16px 64px rgba(255, 107, 53, 0.20);
  --shadow-2xl: 0 24px 96px rgba(255, 107, 53, 0.24);
  --shadow-glow: 0 0 32px rgba(255, 107, 53, 0.4);
  --shadow-glow-strong: 0 0 48px rgba(230, 57, 70, 0.6);

  /* Typographie */
  --font-display: 'Clash Display', 'Montserrat', sans-serif;  /* Titres */
  --font-sans: 'Inter', 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;  /* Texte */
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;  /* Chiffres/Code */

  /* Échelle Typographique */
  --text-xs: 0.75rem;      /* 12px */
  --text-sm: 0.875rem;     /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg: 1.125rem;     /* 18px */
  --text-xl: 1.25rem;      /* 20px */
  --text-2xl: 1.5rem;      /* 24px */
  --text-3xl: 1.875rem;    /* 30px */
  --text-4xl: 2.25rem;     /* 36px */
  --text-5xl: 3rem;        /* 48px */
  --text-6xl: 3.75rem;     /* 60px */
  --text-7xl: 4.5rem;      /* 72px */
  --text-8xl: 6rem;        /* 96px */

  /* Poids de Police */
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;
  --font-black: 900;

  /* Espacement */
  --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 */

  /* Bordures */
  --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: 9999px;

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 500ms cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6);

  /* Z-Index */
  --z-below: -1;
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
  --z-notification: 800;
  --z-max: 999;

  /* Layout */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1536px;

  /* Glassmorphism */
  --glass-blur: blur(16px);
  --glass-bg: rgba(255, 255, 255, 0.1);
  --glass-border: rgba(255, 255, 255, 0.2);
  --glass-shadow: 0 8px 32px rgba(255, 107, 53, 0.1);

  /* Backdrop */
  --backdrop-blur: blur(12px);
  --backdrop-opacity: 0.8;
}

/* ============================================
   DARK MODE VARIABLES
   ============================================ */

[data-theme="dark"] {
  --color-bg: var(--color-dark);
  --color-bg-soft: var(--color-dark-soft);
  --color-text: var(--color-light);
  --color-text-muted: var(--color-gray-400);

  /* Ajustements pour le dark mode */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 16px 64px rgba(0, 0, 0, 0.5);

  --glass-bg: rgba(0, 0, 0, 0.2);
  --glass-border: rgba(255, 255, 255, 0.1);
}

[data-theme="light"] {
  --color-bg: var(--color-light);
  --color-bg-soft: var(--color-white);
  --color-text: var(--color-dark);
  --color-text-muted: var(--color-gray-600);
}

/* ============================================
   RESET & BASE STYLES
   ============================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg);
  overflow-x: hidden;
  transition: background-color var(--transition-base), color var(--transition-base);
}

/* ============================================
   TYPOGRAPHIE
   ============================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--font-bold);
  line-height: 1.2;
  margin-bottom: var(--space-4);
  color: var(--color-dark);
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
  color: var(--color-white);
}

h1 {
  font-size: var(--text-6xl);
  font-weight: var(--font-extrabold);
  letter-spacing: -0.02em;
}

h2 {
  font-size: var(--text-5xl);
  font-weight: var(--font-bold);
  letter-spacing: -0.01em;
}

h3 {
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
}

h4 {
  font-size: var(--text-3xl);
  font-weight: var(--font-semibold);
}

h5 {
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
}

h6 {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
}

p {
  margin-bottom: var(--space-4);
  line-height: 1.7;
  color: var(--color-text-muted);
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-primary-dark);
}

strong, b {
  font-weight: var(--font-semibold);
}

em, i {
  font-style: italic;
}

/* ============================================
   UTILITY CLASSES - COULEURS
   ============================================ */

.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-accent { color: var(--color-accent); }
.text-success { color: var(--color-success); }
.text-highlight { color: var(--color-highlight); }
.text-muted { color: var(--color-text-muted); }

.bg-primary { background-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-accent { background-color: var(--color-accent); }
.bg-success { background-color: var(--color-success); }
.bg-highlight { background-color: var(--color-highlight); }

.bg-gradient-primary { background: var(--gradient-primary); }
.bg-gradient-secondary { background: var(--gradient-secondary); }
.bg-gradient-warm { background: var(--gradient-warm); }
.bg-gradient-sunset { background: var(--gradient-sunset); }

/* ============================================
   UTILITY CLASSES - LAYOUT
   ============================================ */

.container {
  width: 100%;
  max-width: var(--container-xl);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}

.container-narrow {
  max-width: var(--container-lg);
}

.container-wide {
  max-width: var(--container-2xl);
}

.section {
  padding-top: var(--space-20);
  padding-bottom: var(--space-20);
}

.section-sm {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}

.section-lg {
  padding-top: var(--space-32);
  padding-bottom: var(--space-32);
}

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

@media (max-width: 768px) {
  :root {
    --text-6xl: 2.5rem;   /* 40px */
    --text-5xl: 2rem;     /* 32px */
    --text-4xl: 1.75rem;  /* 28px */
  }

  .section {
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
  }

  .container {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  h1 { font-size: var(--text-5xl); }
  h2 { font-size: var(--text-4xl); }
  h3 { font-size: var(--text-3xl); }
}

@media (max-width: 480px) {
  h1 { font-size: var(--text-4xl); }
  h2 { font-size: var(--text-3xl); }
  h3 { font-size: var(--text-2xl); }
}