/* ==========================================================================
   SMILE — Jetons de design
   Source unique de vérité pour couleurs, typographie, espacements, ombres.
   Aucun fichier ne doit coder une valeur en dur : tout passe par ces jetons.
   ========================================================================== */

:root {
  /* --- Marque ------------------------------------------------------------ */
  --c-orange:        #EF7622;  /* accent : badges, barres, focus, graphiques  */
  --c-orange-dark:   #C25A12;  /* survol, bordures, états actifs              */
  --c-graphite:      #23282D;  /* texte principal                             */
  --c-grey-light:    #F2F3F5;  /* fond de page                                */
  --c-white:         #FFFFFF;

  /* Remplissage interactif portant du texte blanc.
     Blanc sur #BE5711 = 4.60:1 (AA texte normal). Le #C25A12 de la charte
     tombe a 4.41:1 et echouerait ; #BE5711 en est perceptuellement
     indiscernable (delta RGB 5) et reste dans la famille orange foncé.
     #C25A12 reste utilise pour les bordures et aplats sans texte.        */
  --c-primary:       #BE5711;
  --c-primary-hover: #A44A0D;
  --c-primary-active:#8E3F0A;

  /* --- Neutres ----------------------------------------------------------- */
  --c-ink:           #23282D;  /* 14.9:1 sur blanc                            */
  --c-ink-muted:     #5A6169;  /*  6.3:1 sur blanc                            */
  --c-ink-subtle:    #767D86;  /*  4.6:1 sur blanc — libellés secondaires     */
  --c-border:        #E3E5E9;
  --c-border-strong: #CDD1D7;
  --c-surface:       #FFFFFF;
  --c-surface-sunk:  #F7F8F9;
  --c-canvas:        #F2F3F5;

  /* --- États sémantiques ------------------------------------------------- */
  --c-success:       #1E7A4D;  /* 5.3:1 sur blanc */
  --c-success-soft:  #E8F3ED;
  --c-danger:        #B3261E;  /* 6.5:1 sur blanc */
  --c-danger-strong: #8E1E17;  /* survol / actif des aplats destructifs        */
  --c-danger-soft:   #FBECEB;
  --c-warning:       #8A5A00;  /* 5.4:1 sur blanc */
  --c-warning-soft:  #FDF3E2;
  --c-info-soft:     #FDF0E7;  /* teinte orange très pâle                     */
  --c-overlay:       rgba(35, 40, 45, 0.48); /* voile des boîtes de dialogue  */

  /* --- Échelle de score (grille admin) ----------------------------------- */
  --c-score-high:    #1E7A4D;
  --c-score-high-bg: #E4F1EA;
  --c-score-mid:     #8A5A00;
  --c-score-mid-bg:  #FBF0DC;
  --c-score-low:     #B3261E;
  --c-score-low-bg:  #FAE8E7;
  --c-score-none-bg: #F2F3F5;

  /* --- Typographie ------------------------------------------------------- */
  --font-serif: Georgia, Cambria, "Times New Roman", "Liberation Serif", serif;
  --font-sans:  Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Calibri,
                "Helvetica Neue", Arial, "Liberation Sans", sans-serif;
  --font-mono:  ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --fs-2xs:   0.6875rem;  /* 11px — micro-libellés                            */
  --fs-xs:    0.75rem;    /* 12px                                             */
  --fs-sm:    0.8125rem;  /* 13px                                             */
  --fs-base:  0.9375rem;  /* 15px — corps                                     */
  --fs-md:    1rem;       /* 16px — corps confortable / champs (anti-zoom iOS) */
  --fs-lg:    1.125rem;   /* 18px                                             */
  --fs-xl:    1.375rem;   /* 22px                                             */
  --fs-2xl:   1.75rem;    /* 28px                                             */
  --fs-3xl:   2.25rem;    /* 36px                                             */

  --lh-tight: 1.2;
  --lh-snug:  1.35;
  --lh-base:  1.6;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --ls-tight:  -0.015em;
  --ls-normal:  0;
  --ls-wide:    0.04em;
  --ls-caps:    0.08em;

  /* --- Espacements (échelle 4px) ----------------------------------------- */
  --sp-1:  0.25rem;   --sp-2:  0.5rem;    --sp-3:  0.75rem;
  --sp-4:  1rem;      --sp-5:  1.25rem;   --sp-6:  1.5rem;
  --sp-8:  2rem;      --sp-10: 2.5rem;    --sp-12: 3rem;
  --sp-16: 4rem;      --sp-20: 5rem;

  /* --- Rayons ------------------------------------------------------------ */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-full: 999px;

  /* --- Ombres douces (jamais de dégradé) --------------------------------- */
  --sh-xs: 0 1px 2px rgba(35, 40, 45, 0.06);
  --sh-sm: 0 1px 3px rgba(35, 40, 45, 0.07), 0 1px 2px rgba(35, 40, 45, 0.04);
  --sh-md: 0 2px 6px rgba(35, 40, 45, 0.07), 0 1px 2px rgba(35, 40, 45, 0.05);
  --sh-lg: 0 8px 24px rgba(35, 40, 45, 0.09), 0 2px 6px rgba(35, 40, 45, 0.05);
  --sh-xl: 0 20px 48px rgba(35, 40, 45, 0.14), 0 4px 12px rgba(35, 40, 45, 0.07);

  /* --- Mouvement (sobre : transitions simples uniquement) ---------------- */
  --t-fast: 120ms;
  --t-base: 180ms;
  --t-slow: 260ms;
  --ease:   cubic-bezier(0.2, 0, 0.2, 1);

  /* Boucles fonctionnelles (indicateurs de chargement). Volontairement hors
     de l'échelle --t-* : celle-ci est remise à 0 sous prefers-reduced-motion,
     ce qui figerait une animation infinie au lieu de la neutraliser.
     La coupure du mouvement est gérée explicitement dans components.css.     */
  --t-spin:     700ms;   /* rotation de l'anneau de chargement */
  --t-shimmer: 1100ms;   /* battement des blocs squelettes     */

  /* --- Focus ------------------------------------------------------------- */
  --focus-ring:   0 0 0 3px rgba(239, 118, 34, 0.42);
  --focus-offset: 2px;

  /* --- Gabarit ----------------------------------------------------------- */
  --w-content: 44rem;   /* colonne de lecture participant */
  --w-wide:    82rem;   /* console admin                   */
  --w-modal:   30rem;   /* panneau de boîte de dialogue    */
  --h-touch:   44px;    /* cible tactile minimale          */
  --h-control: 44px;
  --h-progress: 6px;    /* épaisseur des barres de progression */
  --z-header:  100;
  --z-overlay: 900;
  --z-modal:   1000;
  --z-toast:   1100;
}

/* Respect de la préférence système : on coupe tout mouvement. */
@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-base: 0ms; --t-slow: 0ms; }
}