/* ==========================================================================
   CAPMEDIA ACADEMY · tokens.css
   Livrable de la passe 0 (Claude Design). C'est le contrat : aucune valeur
   de couleur, de typo, d'espace ou de rayon ne doit être écrite ailleurs.

   Esthétique document : gris chauds, sans-serif unique, rayons courts,
   séparation par l'espace. Ombre uniquement sur ce qui flotte.
   ========================================================================== */

:root {
  /* fonds */
  --bg: #FFFFFF;
  --bg-2: #F7F7F5;
  --bg-3: #F1F1EF;

  /* texte : gris chauds */
  --texte: #37352F;
  --texte-2: #787774;
  --texte-3: #9B9A97;

  /* traits et survol */
  --trait: rgba(55, 53, 47, 0.09);
  --trait-fort: rgba(55, 53, 47, 0.16);
  --survol: rgba(55, 53, 47, 0.06);

  /* action */
  --action: #2383E2;
  --action-survol: #1A6DBE;
  --anneau: rgba(35, 131, 226, 0.20);
  --danger: #EB5757;
  --valide: #4DAB9A;

  /* voiles d'encadré */
  --voile-jaune: #FBF3DB;
  --voile-orange: #FAEBDD;
  --voile-vert: #DDEDEA;
  --voile-bleu: #DDEBF1;
  --voile-rouge: #FDEBEC;
  --voile-gris: #F1F1EF;

  /* ombre : flottant uniquement */
  --ombre-flottant:
    0 0 0 1px rgba(15, 15, 15, 0.05),
    0 3px 6px rgba(15, 15, 15, 0.1),
    0 9px 24px rgba(15, 15, 15, 0.2);

  /* typographie */
  --police: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
  --police-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --t-display: 700 clamp(40px, 6vw, 72px) / 1.05 var(--police);
  --t-h1: 700 clamp(32px, 4vw, 48px) / 1.12 var(--police);
  --t-h2: 600 clamp(24px, 3vw, 32px) / 1.2 var(--police);
  --t-lead: 400 19px / 1.55 var(--police);
  --t-corps: 400 16px / 1.6 var(--police);

  --t-app-titre: 700 40px / 1.15 var(--police);
  --t-app-h2: 600 24px / 1.3 var(--police);
  --t-app-h3: 600 19px / 1.35 var(--police);
  --t-app-corps: 400 16px / 1.65 var(--police);
  --t-app-petit: 400 14px / 1.5 var(--police);
  --t-app-micro: 500 12px / 1.4 var(--police);

  --ls-display: -0.03em;
  --ls-h1: -0.025em;
  --ls-h2: -0.02em;

  /* espace */
  --e-1: 4px;  --e-2: 8px;  --e-3: 12px; --e-4: 16px; --e-5: 24px;
  --e-6: 32px; --e-7: 48px; --e-8: 64px; --e-9: 96px; --e-10: 128px;

  --colonne-lecture: 708px;
  --conteneur-marketing: 1120px;
  --marge-mobile: 24px;
  --barre-laterale: 292px;

  /* rayons */
  --r-1: 3px;   /* code, étiquettes, pastilles */
  --r-2: 4px;   /* boutons, champs, encadrés */
  --r-3: 6px;   /* cartes, modales */
  --r-rond: 999px;

  /* mouvement */
  --t-survol: 20ms ease-in;
  --t-apparition: 200ms cubic-bezier(.2, .8, .2, 1);
}

/* Les valeurs claires sont aussi déclarées explicitement, pour pouvoir
   forcer le thème clair sur un sous-arbre : <div data-theme="light">. */
[data-theme="light"] {
  --bg: #FFFFFF;
  --bg-2: #F7F7F5;
  --bg-3: #F1F1EF;
  --texte: #37352F;
  --texte-2: #787774;
  --texte-3: #9B9A97;
  --trait: rgba(55, 53, 47, 0.09);
  --trait-fort: rgba(55, 53, 47, 0.16);
  --survol: rgba(55, 53, 47, 0.06);
  --action: #2383E2;
  --action-survol: #1A6DBE;
  --anneau: rgba(35, 131, 226, 0.20);
  --voile-jaune: #FBF3DB;
  --voile-orange: #FAEBDD;
  --voile-vert: #DDEDEA;
  --voile-bleu: #DDEBF1;
  --voile-rouge: #FDEBEC;
  --voile-gris: #F1F1EF;
  --ombre-flottant:
    0 0 0 1px rgba(15, 15, 15, 0.05),
    0 3px 6px rgba(15, 15, 15, 0.1),
    0 9px 24px rgba(15, 15, 15, 0.2);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #191919;
    --bg-2: #202020;
    --bg-3: #2C2C2C;
    --texte: #E9E9E7;
    --texte-2: #9B9B9B;
    --texte-3: #6F6F6F;
    --trait: rgba(255, 255, 255, 0.094);
    --trait-fort: rgba(255, 255, 255, 0.16);
    --survol: rgba(255, 255, 255, 0.055);
    --action: #4A9EE8;
    --action-survol: #6BB2EE;
    --anneau: rgba(74, 158, 232, 0.25);
    --voile-jaune: #372E20;
    --voile-orange: #3A2A1D;
    --voile-vert: #1F2E28;
    --voile-bleu: #1E2A33;
    --voile-rouge: #372A2A;
    --voile-gris: #2C2C2C;
    --ombre-flottant:
      0 0 0 1px rgba(0, 0, 0, 0.2),
      0 3px 6px rgba(0, 0, 0, 0.3),
      0 9px 24px rgba(0, 0, 0, 0.4);
  }
}

[data-theme="dark"] {
  --bg: #191919;
  --bg-2: #202020;
  --bg-3: #2C2C2C;
  --texte: #E9E9E7;
  --texte-2: #9B9B9B;
  --texte-3: #6F6F6F;
  --trait: rgba(255, 255, 255, 0.094);
  --trait-fort: rgba(255, 255, 255, 0.16);
  --survol: rgba(255, 255, 255, 0.055);
  --action: #4A9EE8;
  --action-survol: #6BB2EE;
  --anneau: rgba(74, 158, 232, 0.25);
  --voile-jaune: #372E20;
  --voile-orange: #3A2A1D;
  --voile-vert: #1F2E28;
  --voile-bleu: #1E2A33;
  --voile-rouge: #372A2A;
  --voile-gris: #2C2C2C;
  --ombre-flottant:
    0 0 0 1px rgba(0, 0, 0, 0.2),
    0 3px 6px rgba(0, 0, 0, 0.3),
    0 9px 24px rgba(0, 0, 0, 0.4);
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}