/**
 * Design Tokens - Palette de couleurs
 * Classification sémantique par usage
 *
 * Catégories:
 * - Neutres clairs: Background (8 couleurs)
 * - Neutres foncés: Text (7 couleurs)
 * - Rouges: 345° à 15° (2 couleurs)
 * - Oranges: 16° à 45° (6 couleurs)
 * - Jaunes: 46° à 76° pas de couleur
 * - Verts: 77° à 163° (2 couleurs)
 * - Cyans: 164° à 196° (1 couleur)
 * - Bleus: 197° à 255° (7 couleurs)
 * - Violets: 256° à 300° (1 couleur)
 * - Magentas: 301° à 344° pas de couleur
 *
 * Total: 34 couleurs
 */

:root {
  /* ═══════════════════════════════════════════════════════════
     NEUTRES CLAIRS (Background + Secondary) — 8 couleurs
     ═══════════════════════════════════════════════════════════ */

  --gris-argent: hsl(0, 0%, 91%);
  --gris-perle: hsl(0, 0%, 96%);
  --blanc-ivoire: hsl(40, 23%, 97%);
  --gris-platine: hsl(0, 0%, 94%);
  --creme-vanille: hsl(36, 100%, 97%);
  --gris-bleu: hsl(192, 15%, 94%);
  --gris-neige: hsl(0, 0%, 99%);
  --beige-lin: hsl(37, 50%, 92%);

  /* ═══════════════════════════════════════════════════════════
     NEUTRES FONCÉS (Text + Primary) — 7 couleurs
     ═══════════════════════════════════════════════════════════ */

  --gris-anthracite: hsl(0, 0%, 10%);
  --noir-pur: hsl(0, 0%, 0%);
  --gris-ardoise: hsl(0, 0%, 16%);
  --gris-graphite: hsl(0, 0%, 20%);
  --gris-fumee: hsl(0, 0%, 23%);
  --gris-etain: hsl(0, 0%, 29%);
  --noir-charbon: hsl(0, 0%, 4%);

  /* ═══════════════════════════════════════════════════════════
     ROUGES (345° à 15°) — 2 couleurs
     ═══════════════════════════════════════════════════════════ */

  --rouge-cerise: hsl(0, 65%, 51%);
  --rose-poudre: hsl(7, 43%, 93%);

  /* ═══════════════════════════════════════════════════════════
     ORANGES (16° à 45°) — 6 couleurs
     ═══════════════════════════════════════════════════════════ */

  --orange-corail: hsl(16, 100%, 60%);
  --taupe-clair: hsl(27, 22%, 78%);
  --beige-sable: hsl(30, 14%, 89%);
  --brun-noisette: hsl(30, 24%, 44%);
  --or-antique: hsl(43, 74%, 31%);
  --or-dore: hsl(46, 65%, 52%);

  /* ═══════════════════════════════════════════════════════════
     VERTS (77° à 163°) — 2 couleurs
     ═══════════════════════════════════════════════════════════ */

  --vert-menthe: hsl(120, 47%, 88%);
  --vert-foret: hsl(150, 100%, 20%);

  /* ═══════════════════════════════════════════════════════════
     CYANS (164° à 196°) — 1 couleur
     ═══════════════════════════════════════════════════════════ */

  --cyan-turquoise: hsl(168, 100%, 36%);

  /* ═══════════════════════════════════════════════════════════
     BLEUS (197° à 255°) — 7 couleurs
     ═══════════════════════════════════════════════════════════ */

  --bleu-ciel: hsl(206, 38%, 80%);
  --bleu-ocean: hsl(207, 100%, 27%);
  --bleu-acier: hsl(207, 79%, 46%);
  --bleu-royal: hsl(210, 100%, 40%);
  --bleu-ardoise: hsl(210, 29%, 24%);
  --bleu-marine: hsl(216, 100%, 30%);
  --bleu-glacier: hsl(217, 100%, 95%);

  /* ═══════════════════════════════════════════════════════════
     VIOLETS (256° à 300°) — 1 couleur
     ═══════════════════════════════════════════════════════════ */

  --violet-iris: hsl(250, 75%, 64%);

  /* ═══════════════════════════════════════════════════════════
     VARIABLES SÉMANTIQUES PAR DÉFAUT
     ═══════════════════════════════════════════════════════════ */

  --color-primary: var(--bleu-royal);
  --color-secondary: var(--gris-argent);
  --color-accent: var(--orange-corail);
  --color-text: var(--gris-anthracite);
  --color-background: var(--gris-perle);

  /* Variantes dérivées */
  --color-primary-hover: color-mix(in srgb, var(--color-primary) 85%, black);
  --color-primary-light: color-mix(in srgb, var(--color-primary) 15%, white);
  --color-text-muted: color-mix(
    in srgb,
    var(--color-text) 60%,
    var(--color-background)
  );
  --color-border: color-mix(
    in srgb,
    var(--color-text) 20%,
    var(--color-background)
  );
}

/* ═══════════════════════════════════════════════════════════════
   STYLES THÉMATIQUES
   ═══════════════════════════════════════════════════════════════ */

/* Style 1: Moderne - Épuré, minimaliste */
[data-style="moderne"] {
  --color-primary: var(--bleu-royal);
  --color-secondary: var(--gris-argent);
  --color-accent: var(--orange-corail);
  --color-text: var(--gris-anthracite);
  --color-background: var(--gris-perle);
}

/* Style 2: Luxe - Élégance haut de gamme */
[data-style="luxe"] {
  --color-primary: var(--gris-anthracite);
  --color-secondary: var(--beige-sable);
  --color-accent: var(--or-dore);
  --color-text: var(--gris-ardoise);
  --color-background: var(--blanc-ivoire);
}

/* Style 3: Professionnel - Sérieux et fiable */
[data-style="professionnel"] {
  --color-primary: var(--bleu-marine);
  --color-secondary: var(--bleu-glacier);
  --color-accent: var(--vert-foret);
  --color-text: var(--noir-charbon);
  --color-background: var(--gris-platine);
}

/* Style 4: Créatif - Expressif et audacieux */
[data-style="creatif"] {
  --color-primary: var(--rouge-cerise);
  --color-secondary: var(--rose-poudre);
  --color-accent: var(--bleu-acier);
  --color-text: var(--gris-anthracite);
  --color-background: var(--creme-vanille);
}

/* Style 5: Raffiné - Subtil et élégant */
[data-style="raffine"] {
  --color-primary: var(--bleu-ardoise);
  --color-secondary: var(--taupe-clair);
  --color-accent: var(--brun-noisette);
  --color-text: var(--gris-graphite);
  --color-background: var(--gris-bleu);
}

/* Style 6: Amical - Chaleureux et accessible */
[data-style="amical"] {
  --color-primary: var(--violet-iris);
  --color-secondary: var(--vert-menthe);
  --color-accent: var(--cyan-turquoise);
  --color-text: var(--bleu-ardoise);
  --color-background: var(--gris-neige);
}

/* Style 7: Puissant - Fort et impactant */
[data-style="puissant"] {
  --color-primary: var(--noir-pur);
  --color-secondary: var(--gris-etain);
  --color-accent: var(--bleu-ocean);
  --color-text: var(--gris-anthracite);
  --color-background: var(--gris-perle);
}

/* Style 8: Vintage - Nostalgique et authentique */
[data-style="vintage"] {
  --color-primary: var(--gris-etain);
  --color-secondary: var(--bleu-ciel);
  --color-accent: var(--or-antique);
  --color-text: var(--gris-fumee);
  --color-background: var(--beige-lin);
}