/* ============================================================
   Conseil Citoyen — Besançon · Design tokens
   Direction « Outil de vérification ». Sombre par défaut, clair en option.
   Importer ce fichier puis styler avec var(--token). AA minimum partout.
   ============================================================ */

:root {
  /* ---- Surfaces (sombre) ---- */
  --bg:         #11151a;   /* fond application */
  --surface:    #171c23;   /* cartes, panneaux */
  --surface-2:  #1c222b;   /* surface enfoncée / sélection douce */
  --surface-3:  #232b36;   /* rail de progression, pastilles */

  /* ---- Lignes ---- */
  --line:       rgba(255,255,255,.07);   /* séparateurs standard */
  --line-2:     rgba(255,255,255,.13);   /* bordure d'élément actif */

  /* ---- Encre / texte ---- */
  --ink:        #e6e9ee;   /* texte primaire */
  --ink-2:      #a4adbd;   /* texte secondaire */
  --ink-3:      #6b7585;   /* texte tertiaire, méta, mono mute */

  /* ---- Accent (froid, unique couleur saturée) ---- */
  --accent:      #4f8cff;
  --accent-ink:  #cfe0ff;               /* texte sur fond sombre, lien */
  --accent-weak: rgba(79,140,255,.14);  /* fond sélection / surlignage */
  --accent-line: rgba(79,140,255,.40);  /* bordure élément focalisé */
  --focus:       #7aa9ff;               /* anneau de focus clavier */

  /* ---- Rayons ---- */
  --r1: 3px;   /* puces, chips */
  --r2: 5px;   /* boutons, champs */
  --r3: 9px;   /* cartes */

  /* ---- Typo ---- */
  --sans: 'Archivo', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

  /* ---- Échelle typographique (px) ---- */
  --t-meta:  10px;   /* labels mono majuscules */
  --t-xs:    11px;   /* timecodes, chips */
  --t-sm:    12.5px; /* méta, liens secondaires */
  --t-body:  13.5px; /* corps */
  --t-md:    14px;   /* intitulés de points */
  --t-lg:    15px;   /* verdict, vote */
  --t-h2:    18px;
  --t-h1:    25px;   /* titre de séance */

  /* ---- Espacement (multiples de 4) ---- */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 22px; --s6: 32px;

  /* ---- Ombre ---- */
  --sh: 0 1px 0 rgba(255,255,255,.03), 0 8px 24px -12px rgba(0,0,0,.6);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.2,.7,.3,1);
  --dur:  .18s;
}

/* ============================================================
   Mode clair — bascule via [data-theme="light"] sur la racine
   ============================================================ */
[data-theme="light"] {
  --bg:         #eef0f3;
  --surface:    #ffffff;
  --surface-2:  #f6f7f9;
  --surface-3:  #eceff3;
  --line:       rgba(17,21,26,.10);
  --line-2:     rgba(17,21,26,.17);
  --ink:        #141a21;
  --ink-2:      #4d5663;
  --ink-3:      #7e8896;
  --accent:      #1f5fd6;
  --accent-ink:  #16357f;
  --accent-weak: rgba(31,95,214,.09);
  --accent-line: rgba(31,95,214,.34);
  --focus:       #1f5fd6;
  --sh: 0 1px 2px rgba(17,21,26,.05), 0 10px 24px -16px rgba(17,21,26,.25);
}

/* Suit la préférence système si aucun thème explicite n'est posé */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg:#eef0f3; --surface:#fff; --surface-2:#f6f7f9; --surface-3:#eceff3;
    --line:rgba(17,21,26,.10); --line-2:rgba(17,21,26,.17);
    --ink:#141a21; --ink-2:#4d5663; --ink-3:#7e8896;
    --accent:#1f5fd6; --accent-ink:#16357f; --accent-weak:rgba(31,95,214,.09);
    --accent-line:rgba(31,95,214,.34); --focus:#1f5fd6;
  }
}

/* ---- Accessibilité : focus visible & motion réduit ---- */
:where(a,button,input,[tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r1);
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}