/* Design tokens de KesKonFait : charte graphique v1.0 (octobre 2026), §5 variables globales et §6 thèmes.
   Source de vérité des couleurs, polices, espacements, rayons, ombres, durées. Les composants (components.css) n'écrivent aucune valeur en dur.
   Thème clair par défaut ; sombre : réglage du système (prefers-color-scheme) ou attribut data-theme="dark" sur <html> ; data-theme="light" force le clair.
   Ajouts à la charte, avec leur raison : --color-on-primary (le texte du bouton principal change de sens en sombre), --color-text-muted et
   --color-border-strong (texte secondaire et bord des champs, mesurés à 4,5:1 et 3:1 au moins), --color-link, --color-focus
   (le jaune de l'exemple de la charte ne fait que 1,4:1 sur le papier chaud : la bague de focus est bleu encre), --type-0 à --type-5 (couleurs des 6 types). */
:root {
  /* Identité */
  --color-primary: #252D4A;
  --color-on-primary: #FFFFFF;
  --color-accent-yellow: #FFD166;
  --color-accent-brick: #C95D45;
  --color-background: #FFF8EC;
  --color-accent-green: #3F6858;
  --color-text: #343640;
  --color-text-muted: #565968;
  --color-link: #285D91;
  --color-focus: #252D4A;
  /* Surfaces */
  --color-surface: #FFFFFF;
  --color-surface-muted: #F5EFE4;
  --color-border: #DDD6CA;
  --color-border-strong: #7C786A;
  /* États fonctionnels */
  --color-success: #2F6B4F;
  --color-warning: #8A5A00;
  --color-danger: #A83232;
  --color-info: #285D91;
  /* Types de sortie (fond de la vignette et de la pastille) : Marchés, Concerts, Expos, Ateliers, Sport, Autres */
  --type-0: #FFE7A8;
  --type-1: #F6D5CB;
  --type-2: #D7E6F4;
  --type-3: #D9E9E0;
  --type-4: #CFE5D8;
  --type-5: #FFEFC2;
  /* Mention de crédit posée sur une photo : fond sombre translucide, texte clair (même sens dans les deux thèmes) */
  --overlay-bg: rgba(0, 0, 0, 0.66);
  --overlay-text: #FFFFFF;
  --color-cartouche: transparent; /* fond posé sous le logo : rien en clair, papier chaud en sombre (le logo est dessiné pour le papier, on ne le recolore pas) */
  --map-pin: #252D4A; --map-pin-contour: #FFF8EC; --map-pin-choisi: #FAC855; --map-pin-texte: #FFFFFF; /* épingles de la carte (plan IGN toujours clair) : mêmes valeurs dans les deux thèmes */
  --credit-size: 8px; /* taille du crédit posé sur la photo, choix du porteur du projet (sous les 12 px que recommande la charte pour un petit libellé) */
  /* Typographie : Manrope et Inter si les fichiers sont déposés (voir polices.css), sinon la pile de secours */
  --font-heading: "Manrope", "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 2rem;
  /* Espacements */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  /* Rayons */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  /* Ombres */
  --shadow-card: 0 4px 16px rgba(37, 45, 74, 0.06);
  --shadow-card-hover: 0 8px 24px rgba(37, 45, 74, 0.12);
  /* Mise en page */
  --content-max-width: 1200px;
  --page-gutter-mobile: 16px;
  --page-gutter-desktop: 32px;
  /* Animations */
  --motion-fast: 150ms;
  --motion-normal: 220ms;
  --motion-slow: 320ms;
  /* Contrôles : 48 px de haut ; 44 px au moins pour toute cible tactile */
  --control-height: 48px;
  --touch-min: 44px;
  --nav-height: 60px;
}

[data-theme="dark"] {
  --color-primary: #E8EAF4;
  --color-on-primary: #171923;
  --color-background: #171923;
    --color-cartouche: #FFF8EC;
  --color-surface: #222533;
  --color-surface-muted: #2B2F40;
  --color-text: #F1F1F5;
  --color-text-muted: #B4B7C8;
  --color-link: #8FB8E8;
  --color-focus: #E8EAF4;
  --color-border: #414557;
  --color-border-strong: #8A8FA6;
  --color-accent-yellow: #FFD166;
  --color-accent-brick: #E17B64;
  --color-accent-green: #80B49B;
  --color-success: #7FC8A4;
  --color-warning: #E8B04A;
  --color-danger: #F08A8A;
  --color-info: #8FB8E8;
  --type-0: #4A3F1E;
  --type-1: #4F2F2A;
  --type-2: #263A52;
  --type-3: #2B4339;
  --type-4: #24433A;
  --type-5: #4A4222;
  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.25);
  --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.4);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-primary: #E8EAF4;
    --color-on-primary: #171923;
    --color-background: #171923;
    --color-cartouche: #FFF8EC;
    --color-surface: #222533;
    --color-surface-muted: #2B2F40;
    --color-text: #F1F1F5;
    --color-text-muted: #B4B7C8;
    --color-link: #8FB8E8;
    --color-focus: #E8EAF4;
    --color-border: #414557;
    --color-border-strong: #8A8FA6;
    --color-accent-yellow: #FFD166;
    --color-accent-brick: #E17B64;
    --color-accent-green: #80B49B;
    --color-success: #7FC8A4;
    --color-warning: #E8B04A;
    --color-danger: #F08A8A;
    --color-info: #8FB8E8;
    --type-0: #4A3F1E;
    --type-1: #4F2F2A;
    --type-2: #263A52;
    --type-3: #2B4339;
    --type-4: #24433A;
    --type-5: #4A4222;
    --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.25);
    --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.4);
  }
}