/* ══════════════════════════════════════════════════════════════
   Horsio — Tokens de design (sprint UX1, 2026-07-29)
   Source unique des couleurs de l'app. Table de correspondance
   hex → token figée dans docs/sprints/SPRINTS_REFACTORING_UX.md §9.
   Les couleurs *données* (niveaux.couleur, rdv_types.couleur,
   HORSIO_COLORS, palettes THEME_COLORS vitrine) ne sont PAS des
   tokens et restent en dur dans le code.
   Surcharges par thème : core/app-themes.css ([data-theme="…"]).
   ══════════════════════════════════════════════════════════════ */
:root {
  /* ── Marque ─────────────────────────────────────────────── */
  --h-primary:        #2C4A2E;   /* vert Horsio (G.forest) */
  --h-sage:           #5C7A4E;   /* G.sage */
  --h-teal:           #3F5F54;   /* sous-onglets carnets/prestations */
  --h-accent:         #C8954A;   /* doré Horsio */
  --h-accent-soft:    #C8A96E;
  --h-rust:           #C4622D;   /* G.rust */
  --h-earth:          #8B6914;   /* G.earth */
  --h-bark:           #4A3728;   /* G.bark — texte chaud */

  /* ── Verts clairs (fonds/chips) ─────────────────────────── */
  --h-primary-soft:   #E8F5E9;
  --h-primary-softer: #F0F7F0;
  --h-primary-pale:   #D0E8D0;   /* bordures de chips vertes */

  /* ── Surfaces ───────────────────────────────────────────── */
  --h-bg:             #FAF6EE;   /* fond app (G.cream) */
  --h-surface:        #FFFFFF;
  --h-surface-warm:   #FAF8F3;   /* cartes, pages d'impression */
  --h-surface-alt:    #F7F5F0;
  --h-surface-grey:   #F5F5F5;
  --h-surface-grey-soft: #FAFAFA;
  --h-sand:           #F0E8D5;   /* G.sand */
  --h-fog:            #E8E0D0;   /* G.fog */
  --h-border-warm:    #F0ECE4;   /* chips/onglets inactifs beiges */
  --h-border:         #E0E0E0;
  --h-border-soft:    #F0F0F0;

  /* ── Neutres (échelle : nombre plus grand = plus sombre) ── */
  --h-text:           #1A1A1A;
  --h-grey-700:       #333333;
  --h-grey-650:       #444444;
  --h-grey-600:       #555555;
  --h-grey-500:       #666666;   /* texte secondaire */
  --h-grey-400:       #888888;   /* texte atténué */
  --h-grey-350:       #999999;
  --h-grey-300:       #AAAAAA;   /* placeholders, icônes inactives */
  --h-grey-250:       #BBBBBB;
  --h-grey-200:       #CCCCCC;
  --h-grey-150:       #DDDDDD;   /* bordures inputs */
  --h-grey-100:       #EEEEEE;   /* bordures légères */

  /* ── Sémantique : danger ────────────────────────────────── */
  --h-danger:         #C0392B;
  --h-danger-strong:  #C62828;
  --h-danger-bright:  #E74C3C;
  --h-danger-soft:    #FDECEA;

  /* ── Sémantique : warning / orange ──────────────────────── */
  --h-warning:        #E65100;
  --h-warning-deep:   #B0610A;
  --h-warning-soft:   #FFF3E0;

  /* ── Sémantique : ambre / jaune ─────────────────────────── */
  --h-amber:          #CA8A04;
  --h-amber-deep:     #92400E;   /* texte sur fonds ambrés (externes) */
  --h-amber-soft:     #FEF3C7;
  --h-amber-softer:   #FFF8E1;
  --h-yellow-chip:    #FCD34D;

  /* ── Sémantique : succès ────────────────────────────────── */
  --h-success:        #2C7A4B;   /* lieux, SIRE, confirmations */

  /* ── Sémantique : info / bleu ───────────────────────────── */
  --h-info:           #0277BD;
  --h-info-bright:    #0EA5E9;   /* invités */
  --h-info-deep:      #1565C0;
  --h-info-soft:      #E3F2FD;
  --h-blue:           #3A6EA5;   /* G.blue */

  /* ── Sémantique : violet ────────────────────────────────── */
  --h-purple:         #7B5EA7;   /* licences, au pair, périodes */
  --h-purple-soft:    #F3F0FA;
}

/* ══════════════════════════════════════════════════════════════
   SweetAlert2 (UX4) — vit hors React, monté dans document.body.
   Les boutons sont colorés par le mixin (`confirmButtonColor`, qui pose
   un style inline) ; ces règles neutralisent surtout les couleurs par
   défaut de sweetalert2.min.css — chargé AVANT ce fichier dans app.html,
   donc on l'emporte à spécificité égale. Pas d'`!important` : le style
   inline du mixin reste prioritaire quand il s'applique.
   ══════════════════════════════════════════════════════════════ */
.swal2-container           { z-index: 4000; }
.swal2-styled.swal2-confirm { background-color: var(--h-primary); }
.swal2-styled.swal2-cancel  { background-color: var(--h-grey-400); }
.swal2-styled.swal2-deny    { background-color: var(--h-danger); }
.swal2-popup                { background: var(--h-surface); color: var(--h-text); }
.swal2-title                { color: var(--h-text); }
.swal2-html-container       { color: var(--h-grey-600); }

/* ══════════════════════════════════════════════════════════════
   Bouton Actualiser — rotation pendant le rechargement.
   `prefers-reduced-motion` : l'opacité réduite du bouton désactivé
   suffit alors à signaler l'état en cours.
   ══════════════════════════════════════════════════════════════ */
@keyframes horsio-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  @keyframes horsio-spin { from { transform: none; } to { transform: none; } }
}