/**
 * Design Tokens - Variables CSS
 * Ce fichier contient toutes les variables CSS (custom properties) utilisées dans le projet.
 * Les noms sont descriptifs et basés sur les valeurs plutôt que sur leur usage sémantique.
 */

:root {
  /* ============================================
     COULEURS (Colors)
     ============================================ */

  /* Bleus */
  --bleu-electrique: hsl(243, 80%, 62%);
  --bleu-violet: hsl(258, 90%, 66%);
  --bleu-violet-clair: hsl(258, 87%, 76%);
  --bleu-acier: hsl(204, 70%, 53%);
  --bleu-material: hsl(207, 90%, 54%);
  --bleu-nordique: hsl(213, 32%, 52%);
  --bleu-ciel: hsl(193, 43%, 67%);
  --bleu-swiss: hsl(240, 100%, 50%);

  /* Violets et Magentas */
  --violet-profond: hsl(258, 68%, 35%);
  --violet-pastel: hsl(270, 100%, 70%);
  --magenta-neon: hsl(300, 100%, 50%);
  --magenta-pur: hsl(286, 100%, 50%);
  --rose-vif: hsl(330, 81%, 60%);
  --rose-magenta: hsl(334, 100%, 50%);
  --rose-material: hsl(340, 82%, 52%);
  --rose-clay: hsl(340, 100%, 70%);
  --rose-memphis: hsl(14, 100%, 60%);
  --rose-vaporwave: hsl(328, 100%, 71%);
  --rose-maximalist: hsl(351, 100%, 55%);
  --rose-nordique: hsl(354, 42%, 56%);

  /* Cyans et Turquoises */
  --cyan-neon: hsl(180, 100%, 50%);
  --cyan-dark: hsl(189, 100%, 50%);
  --cyan-vaporwave: hsl(189, 99%, 50%);

  /* Verts */
  --vert-flat: hsl(145, 63%, 49%);
  --vert-terminal: hsl(120, 100%, 50%);
  --vert-terminal-fonce: hsl(120, 100%, 40%);
  --vert-terminal-clair: hsl(120, 100%, 60%);
  --vert-retro: hsl(137, 50%, 61%);
  --vert-maximalist: hsl(145, 100%, 45%);

  /* Rouges */
  --rouge-flat: hsl(6, 78%, 57%);
  --rouge-retro: hsl(0, 100%, 70%);
  --rouge-brutalism: hsl(0, 100%, 50%);
  --rouge-swiss: hsl(0, 100%, 50%);
  --rouge-memphis: hsl(358, 73%, 48%);

  /* Jaunes et Oranges */
  --jaune-or: hsl(43, 74%, 49%);
  --jaune-beige: hsl(39, 42%, 60%);
  --jaune-glass: hsl(43, 96%, 56%);
  --jaune-neon: hsl(60, 100%, 50%);
  --jaune-retro: hsl(48, 100%, 62%);
  --jaune-maximalist: hsl(54, 100%, 50%);
  --jaune-vaporwave: hsl(57, 100%, 80%);
  --orange-material: hsl(28, 100%, 57%);
  --orange-memphis: hsl(31, 96%, 55%);

  /* Gris et Neutres */
  --noir: hsl(0, 0%, 0%);
  --noir-surface: hsl(0, 0%, 4%);
  --noir-presque: hsl(0, 0%, 10%);
  --gris-tres-fonce: hsl(0, 0%, 17%);
  --gris-fonce: hsl(0, 0%, 20%);
  --gris-moyen-fonce: hsl(0, 0%, 29%);
  --gris-moyen: hsl(0, 0%, 40%);
  --gris-moyen-clair: hsl(0, 0%, 42%);
  --gris-clair: hsl(0, 0%, 88%);
  --gris-tres-clair: hsl(0, 0%, 94%);
  --gris-ultra-clair: hsl(0, 0%, 96%);
  --blanc-casse: hsl(0, 0%, 98%);
  --blanc: hsl(0, 0%, 100%);

  /* Couleurs complexes */
  --charcoal: hsl(215, 25%, 27%);
  --charcoal-clair: hsl(215, 16%, 47%);
  --slate: hsl(210, 29%, 24%);
  --slate-clair: hsl(184, 9%, 62%);
  --indigo-fonce: hsl(249, 47%, 20%);
  --ardoise: hsl(220, 16%, 22%);
  --ardoise-claire: hsl(220, 16%, 36%);
  --lavande-fonce: hsl(228, 100%, 94%);
  --lavande-claire: hsl(228, 20%, 63%);
  --aubergine-fonce: hsl(273, 85%, 7%);
  --aubergine: hsl(273, 64%, 12%);
  --marine-fonce: hsl(229, 47%, 10%);
  --marine: hsl(230, 45%, 16%);
  --beige-clair: hsl(40, 36%, 98%);
  --beige: hsl(40, 18%, 91%);
  --creme: hsl(192, 15%, 94%);
  --creme-pale: hsl(40, 100%, 96%);
  --perle: hsl(218, 27%, 92%);
  --perle-claire: hsl(218, 27%, 94%);
  --gris-bleu-clair: hsl(214, 32%, 91%);
  --argent: hsl(217, 26%, 77%);
  --chamois: hsl(210, 40%, 93%);
  --ivoire: hsl(210, 40%, 98%);
  --tan: hsl(30, 24%, 44%);
  --bronze: hsl(43, 48%, 58%);
  --ivoire-chaud: hsl(60, 56%, 91%);
  --violet-fonce: hsl(270, 100%, 10%);
  --violet-tres-fonce: hsl(270, 73%, 19%);
  --aubergine-tres-fonce: #1a0033;
  --bleu-nuit: hsl(213, 32%, 63%);
  --sable: hsl(33, 100%, 90%);
  --taupe: hsl(225, 18%, 23%);
  --taupe-clair: hsl(217, 23%, 39%);
  --rose-surface: hsl(340, 100%, 75%);
  --rose-pastel: hsl(318, 50%, 56%);
  --jaune-pastel: hsl(44, 99%, 65%);

  /* Couleurs avec transparence */
  --noir-alpha-87: hsla(0, 0%, 0%, 0.87);
  --noir-alpha-60: hsla(0, 0%, 0%, 0.6);
  --blanc-alpha-70: hsla(0, 0%, 100%, 0.7);
  --blanc-alpha-50: hsla(0, 0%, 100%, 0.5);
  --cyan-dark-alpha-20: hsla(189, 100%, 50%, 0.2);
  --rose-vaporwave-alpha-20: hsla(328, 100%, 71%, 0.2);

  /* ========================================
   *     FAMILLES DE POLICES - Modern Font Stacks
   *     ======================================== */

  /* Polices système principales */
  --font-system-ui: system-ui, sans-serif;
  --font-transitional:
    Charter, "Bitstream Charter", "Sitka Text", Cambria, serif;
  --font-old-style:
    "Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, serif;
  --font-humanist:
    Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro,
    sans-serif;
  --font-geometric-humanist:
    Avenir, Montserrat, Corbel, "URW Gothic", source-sans-pro, sans-serif;
  --font-classical-humanist:
    Optima, Candara, "Noto Sans", source-sans-pro, sans-serif;
  --font-neo-grotesque:
    Inter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial,
    sans-serif;

  /* Polices monospace */
  --font-mono-slab: "Nimbus Mono PS", "Courier New", monospace;
  --font-mono-code:
    ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas,
    "DejaVu Sans Mono", monospace;

  /* Polices d'affichage */
  --font-industrial:
    Bahnschrift, "DIN Alternate", "Franklin Gothic Medium",
    "Nimbus Sans Narrow", sans-serif-condensed, sans-serif;
  --font-rounded-sans:
    ui-rounded, "Hiragino Maru Gothic ProN", Quicksand, Comfortaa, Manjari,
    "Arial Rounded MT", "Arial Rounded MT Bold", Calibri, source-sans-pro,
    sans-serif;
  --font-slab-serif:
    Rockwell, "Rockwell Nova", "Roboto Slab", "DejaVu Serif", "Sitka Small",
    serif;
  --font-antique:
    Superclarendon, "Bookman Old Style", "URW Bookman", "URW Bookman L",
    "Georgia Pro", Georgia, serif;
  --font-didone:
    Didot, "Bodoni MT", "Noto Serif Display", "URW Palladio L", P052, Sylfaen,
    serif;
  --font-handwritten:
    "Segoe Print", "Bradley Hand", Chilanka, TSCu_Comic, casual, cursive;

  /* Anciennes variables CSS de polices */

  --font-inter: "Inter", -apple-system, sans-serif;
  --font-poppins: "Poppins", sans-serif;
  --font-playfair: "Playfair Display", Georgia, serif;
  --font-cormorant: "Cormorant Garamond", serif;
  --font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-helvetica: "Helvetica Neue", Arial, sans-serif;
  --font-roboto: "Roboto", "Open Sans", sans-serif;
  --font-lato: "Lato", sans-serif;
  --font-sf-pro: "SF Pro Display", -apple-system, sans-serif;
  --font-orbitron: "Orbitron", "Courier New", monospace;
  --font-share-tech: "Share Tech Mono", monospace;
  --font-roboto-condensed: "Roboto Condensed", sans-serif;
  --font-montserrat: "Montserrat", sans-serif;
  --font-courier: "Courier New", "Courier", monospace;
  --font-typewriter: "American Typewriter", serif;
  --font-arial-black: "Arial Black", "Impact", sans-serif;
  --font-courier-mono: "Courier New", "Monaco", monospace;
  --font-consolas: "Consolas", monospace;
  --font-fira-code: "Fira Code", monospace;
  --font-quicksand: "Quicksand", "Varela Round", sans-serif;
  --font-nunito: "Nunito", sans-serif;
  --font-comic-sans: "Comic Sans MS", "Chalkboard SE", fantasy;
  --font-trebuchet: "Trebuchet MS", sans-serif;
  --font-vt323: "Courier New", "VT323", monospace;
  --font-press-start: "Press Start 2P", cursive;
  --font-didot: "Didot", "Bodoni MT", serif;
  --font-futura: "Futura", "Century Gothic", sans-serif;
  --font-helvetica-simple: "Helvetica", "Arial", sans-serif;

  /* ============================================
     TAILLES DE POLICE (Font Sizes)
     ============================================ */

  --text-16: 16px;
  --text-17: 17px;
  --text-18: 18px;

  /* ============================================
     POIDS DE POLICE (Font Weights)
     ============================================ */

  --weight-400: 400;
  --weight-500: 500;
  --weight-600: 600;
  --weight-700: 700;
  --weight-900: 900;

  /* ============================================
     HAUTEUR DE LIGNE (Line Heights)
     ============================================ */

  --leading-1-2: 1.2;
  --leading-1-4: 1.4;
  --leading-1-5: 1.5;
  --leading-1-6: 1.6;
  --leading-1-7: 1.7;

  /* ============================================
     ESPACEMENT DES LETTRES (Letter Spacing)
     ============================================ */

  --tracking-tight-2: -0.02em;
  --tracking-tight-1: -0.01em;
  --tracking-none: 0;
  --tracking-normal: 0.00938em;
  --tracking-wide-1: 0.02em;
  --tracking-wide-2: 0.03em;
  --tracking-wide-3: 0.05em;
  --tracking-wide-4: 0.08em;
  --tracking-wide-5: 0.1em;

  /* ============================================
     ESPACEMENTS (Spacing)
     ============================================ */

  --space-2: 2px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-30: 30px;
  --space-32: 32px;
  --space-36: 36px;
  --space-40: 40px;
  --space-42: 42px;
  --space-48: 48px;
  --space-50: 50px;
  --space-52: 52px;
  --space-60: 60px;
  --space-64: 64px;
  --space-72: 72px;

  /* ============================================
     RAYONS DE BORDURE (Border Radius)
     ============================================ */

  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-15: 15px;
  --radius-2xl: 16px;
  --radius-3xl: 20px;
  --radius-4xl: 30px;
  --radius-full: 50%;

  /* ============================================
     LARGEURS DE BORDURE (Border Widths)
     ============================================ */

  --border-0: 0px;
  --border-1: 1px;
  --border-2: 2px;
  --border-3: 3px;
  --border-4: 4px;
  --border-5: 5px;

  /* ============================================
     STYLES DE BORDURE (Border Styles)
     ============================================ */

  --border-solid: solid;
  --border-double: double;

  /* ============================================
     OMBRES (Shadows)
     ============================================ */

  /* Ombres douces */
  --shadow-soft-xs: 0 1px 2px hsla(0, 0%, 0%, 0.05);
  --shadow-soft-sm: 0 2px 4px hsla(0, 0%, 0%, 0.1);
  --shadow-soft-md: 0 4px 6px hsla(0, 0%, 0%, 0.07);
  --shadow-soft-lg: 0 10px 15px hsla(0, 0%, 0%, 0.1);

  /* Ombres Material Design */
  --shadow-material-sm:
    0 2px 1px -1px hsla(0, 0%, 0%, 0.2), 0 1px 1px 0 hsla(0, 0%, 0%, 0.14),
    0 1px 3px 0 hsla(0, 0%, 0%, 0.12);
  --shadow-material-md:
    0 3px 3px -2px hsla(0, 0%, 0%, 0.2), 0 3px 4px 0 hsla(0, 0%, 0%, 0.14),
    0 1px 8px 0 hsla(0, 0%, 0%, 0.12);
  --shadow-material-lg:
    0 5px 5px -3px hsla(0, 0%, 0%, 0.2), 0 8px 10px 1px hsla(0, 0%, 0%, 0.14),
    0 3px 14px 2px hsla(0, 0%, 0%, 0.12);

  /* Ombres Neumorphism */
  --shadow-neomorph-sm:
    6px 6px 12px hsl(217, 26%, 77%), -6px -6px 12px hsl(0, 0%, 100%);
  --shadow-neomorph-md:
    10px 10px 20px hsl(217, 26%, 77%), -10px -10px 20px hsl(0, 0%, 100%);
  --shadow-neomorph-lg:
    15px 15px 30px hsl(217, 26%, 77%), -15px -15px 30px hsl(0, 0%, 100%);

  /* Ombres Claymorphism */
  --shadow-clay-sm:
    8px 8px 16px hsla(217, 26%, 77%, 0.6), -8px -8px 16px hsla(0, 0%, 100%, 0.5);
  --shadow-clay-md:
    12px 12px 24px hsla(217, 26%, 77%, 0.6),
    -12px -12px 24px hsla(0, 0%, 100%, 0.5);
  --shadow-clay-lg:
    20px 20px 40px hsla(217, 26%, 77%, 0.6),
    -20px -20px 40px hsla(0, 0%, 100%, 0.5);

  /* Ombres dures / Offset */
  --shadow-hard-xs: 3px 3px 0px hsl(0, 0%, 29%);
  --shadow-hard-sm: 3px 3px 0px hsl(0, 0%, 0%);
  --shadow-hard-md: 5px 5px 0px hsl(0, 0%, 29%);
  --shadow-hard-lg: 8px 8px 0px hsl(0, 0%, 29%);
  --shadow-hard-xl: 8px 8px 0px hsl(0, 0%, 0%);
  --shadow-hard-2xl: 12px 12px 0px hsl(0, 0%, 0%);

  /* Ombres Vaporwave */
  --shadow-vaporwave-sm:
    4px 4px 0px hsl(328, 100%, 71%), 8px 8px 0px hsl(189, 99%, 50%);
  --shadow-vaporwave-md:
    6px 6px 0px hsl(328, 100%, 71%), 12px 12px 0px hsl(189, 99%, 50%);
  --shadow-vaporwave-lg:
    8px 8px 0px hsl(328, 100%, 71%), 16px 16px 0px hsl(189, 99%, 50%),
    24px 24px 0px hsl(270, 100%, 70%);

  /* Ombres Memphis */
  --shadow-memphis-sm: 3px 3px 0px hsl(0, 0%, 0%);
  --shadow-memphis-md: 6px 6px 0px hsl(0, 0%, 0%);
  --shadow-memphis-lg: 10px 10px 0px hsl(0, 0%, 0%);

  /* Ombres Neon */
  --shadow-neon-green-sm: 0 0 5px hsl(120, 100%, 50%);
  --shadow-neon-green-md:
    0 0 10px hsl(120, 100%, 50%), 0 0 20px hsl(120, 100%, 50%);
  --shadow-neon-green-lg:
    0 0 15px hsl(120, 100%, 50%), 0 0 30px hsl(120, 100%, 50%),
    0 0 45px hsl(120, 100%, 50%);

  --shadow-neon-cyber-sm:
    0 0 5px hsl(300, 100%, 50%), 0 0 10px hsl(180, 100%, 50%);
  --shadow-neon-cyber-md:
    0 0 10px hsl(300, 100%, 50%), 0 0 20px hsl(180, 100%, 50%),
    0 0 30px hsl(300, 100%, 50%);
  --shadow-neon-cyber-lg:
    0 0 15px hsl(300, 100%, 50%), 0 0 30px hsl(180, 100%, 50%),
    0 0 45px hsl(300, 100%, 50%), 0 0 60px hsl(180, 100%, 50%);

  /* Ombres colorées */
  --shadow-elegant-sm: 0 2px 4px hsla(43, 74%, 49%, 0.08);
  --shadow-elegant-md: 0 4px 8px hsla(43, 74%, 49%, 0.12);
  --shadow-elegant-lg: 0 8px 16px hsla(43, 74%, 49%, 0.15);

  --shadow-glass-sm: 0 4px 6px hsla(0, 0%, 0%, 0.1);
  --shadow-glass-md: 0 8px 16px hsla(0, 0%, 0%, 0.15);
  --shadow-glass-lg: 0 16px 32px hsla(0, 0%, 0%, 0.2);

  --shadow-dark-sm: 0 2px 8px hsla(189, 100%, 50%, 0.15);
  --shadow-dark-md: 0 4px 16px hsla(189, 100%, 50%, 0.25);
  --shadow-dark-lg: 0 8px 32px hsla(189, 100%, 50%, 0.35);

  --shadow-nordic-sm: 0 1px 3px hsla(220, 16%, 22%, 0.08);
  --shadow-nordic-md: 0 4px 8px hsla(220, 16%, 22%, 0.12);
  --shadow-nordic-lg: 0 8px 16px hsla(220, 16%, 22%, 0.16);

  --shadow-artdeco-sm: 0 2px 4px hsla(43, 48%, 58%, 0.2);
  --shadow-artdeco-md: 0 4px 8px hsla(43, 48%, 58%, 0.3);
  --shadow-artdeco-lg: 0 8px 16px hsla(43, 48%, 58%, 0.4);

  --shadow-maximalist-sm:
    0 0 10px hsla(351, 100%, 55%, 0.5), 0 0 20px hsla(145, 100%, 45%, 0.3);
  --shadow-maximalist-md:
    0 0 20px hsla(351, 100%, 55%, 0.6), 0 0 40px hsla(145, 100%, 45%, 0.4),
    0 0 60px hsla(54, 100%, 50%, 0.3);
  --shadow-maximalist-lg:
    0 0 30px hsla(351, 100%, 55%, 0.7), 0 0 60px hsla(145, 100%, 45%, 0.5),
    0 0 90px hsla(54, 100%, 50%, 0.4);

  /* Ombres none */
  --shadow-none: none;

  /* ============================================
     FLOU (Blur)
     ============================================ */

  --blur-none: 0px;
  --blur-sm: 10px;

  /* ============================================
     OPACITÉ (Opacity)
     ============================================ */

  --opacity-full: 1;
  --opacity-70: 0.7;

  /* ============================================
     FILTRES D'ARRIÈRE-PLAN (Backdrop Filters)
     ============================================ */

  --backdrop-none: none;
  --backdrop-glass: blur(10px) saturate(180%);

  /* ============================================
     VITESSES DE TRANSITION (Transition Speed)
     ============================================ */

  --duration-instant: 0s;
  --duration-fast: 0.1s;
  --duration-quick: 0.15s;
  --duration-normal: 0.2s;
  --duration-smooth: 0.25s;
  --duration-relaxed: 0.3s;
  --duration-slow: 0.4s;
  --duration-slower: 0.5s;

  /* ============================================
     COURBES DE TRANSITION (Transition Easing)
     ============================================ */

  --ease-linear: linear;
  --ease-in-out: ease-in-out;
  --ease-default: ease;
  --ease-material: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* ============================================
     GRADIENTS
     ============================================ */

  --gradient-glass: linear-gradient(
    135deg,
    hsl(232, 79%, 66%) 0%,
    hsl(271, 56%, 56%) 100%
  );
  --gradient-vaporwave: linear-gradient(
    135deg,
    #05ffa1 0%,
    #b967ff 50%,
    #fffb96 100%
  );
  --gradient-artdeco: linear-gradient(135deg, #f5f5dc 0%, #2b2b2b 100%);

  --gradient-maximalist-diagonal: repeating-linear-gradient(
    45deg,
    #fff176,
    #fff176 10px,
    #ff80ab 10px,
    #ff80ab 20px
  );

  --gradient-memphis-cross:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 10px,
      hsla(0, 0%, 0%, 0.1) 10px,
      hsla(0, 0%, 0%, 0.1) 20px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 10px,
      hsla(14, 100%, 60%, 0.1) 10px,
      hsla(14, 100%, 60%, 0.1) 20px
    ),
    hsl(54, 100%, 90%);

  /* ============================================
     COULEURS SPÉCIALES
     ============================================ */

  --color-transparent: transparent;
}

/* ============================================
   NOTES D'UTILISATION
   ============================================

   Ce fichier contient tous les tokens de design avec des noms DESCRIPTIFS
   plutôt que sémantiques. Les noms sont basés sur les valeurs elles-mêmes.

   EXEMPLES:
   - Au lieu de --primary-color, utilisez --bleu-electrique
   - Au lieu de --spacing-xs, utilisez --space-6
   - Au lieu de --font-size-base, utilisez --text-16

   CATÉGORIES:

   1. COULEURS
      - Nommées d'après leur apparence visuelle
      - Incluent les variantes avec transparence (-alpha-XX)

   2. FAMILLES DE POLICES
      - Nommées d'après le nom de la police principale
      - Préfixées par --font-

   3. TAILLES DE POLICE
      - Format: --text-{pixels}

   4. POIDS DE POLICE
      - Format: --weight-{valeur}

   5. HAUTEUR DE LIGNE
      - Format: --leading-{valeur avec tirets}

   6. ESPACEMENT DES LETTRES
      - Format: --tracking-{description}

   7. ESPACEMENTS
      - Format: --space-{pixels}

   8. RAYONS DE BORDURE
      - Format: --radius-{taille ou description}

   9. LARGEURS DE BORDURE
      - Format: --border-{pixels}

   10. OMBRES
       - Nommées d'après le style et la taille
       - Format: --shadow-{style}-{taille}

   11. EFFETS
       - blur, opacity, backdrop filters

   12. TRANSITIONS
       - duration (vitesse) et ease (courbe)

   13. GRADIENTS
       - Gradients complexes prédéfinis

   ============================================ */