/**
 * Jetons de conception.
 *
 * Direction : suisse / éditoriale, palette institutionnelle française.
 * La couleur est sémantique et jamais décorative :
 *   — le bleu République porte la navigation et les actions principales,
 *   — le vert ne signifie QUE « bonne réponse »,
 *   — le rouge ne signifie QUE « mauvaise réponse » ou « temps critique ».
 * Aucun de ces trois n'est employé pour habiller une surface.
 */

:root {
  /* --- Fond et texte --- */
  --color-paper: #f6f5f2;
  --color-surface: #ffffff;
  --color-surface-sunken: #ecebe6;
  --color-ink: #161616;
  --color-ink-muted: #5a5a58;
  /* 4.69:1 sur le papier — conforme AA même en petit corps. */
  --color-ink-faint: #6f6e68;
  --color-rule: #d9d7d0;
  --color-rule-strong: #b5b2a8;

  /* --- Couleurs sémantiques --- */
  --color-blue: #000091;
  --color-blue-hover: #1c1cad;
  --color-blue-wash: #e8e8f7;
  --color-green: #18753c;
  --color-green-wash: #dff3e5;
  --color-red: #e1000f;
  --color-red-wash: #fbe3e4;
  /* Le rouge vif ne tient pas l'AA sur son propre lavis (4.09:1) :
     le texte des pastilles utilise cette variante assombrie (5.89:1). */
  --color-red-ink: #b3000c;
  --color-green-ink: #166b37;
  --color-on-accent: #ffffff;

  /* Ventilation par catégorie.
     La longueur de la barre porte déjà la grandeur : une seule teinte suffit.
     Pas de dégradé arc-en-ciel — il ferait croire à un codage supplémentaire
     qui n'existe pas, et rouge/vert seuls ne sont pas lisibles en cas de
     déficience de la vision des couleurs. L'état est porté par un libellé. */
  --viz-bar: var(--color-blue);
  --viz-track: #e2e0d9;
  --viz-threshold: var(--color-ink-faint);

  /* --- Typographie --- */
  --font-serif: 'Spectral', ui-serif, Georgia, 'Times New Roman', serif;
  --font-sans: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --text-question: clamp(1.375rem, 1.1rem + 1.35vw, 2.125rem);
  --text-display: clamp(2.25rem, 1.4rem + 4vw, 4.5rem);
  --text-numeral: clamp(3.5rem, 2rem + 7vw, 7rem);

  --tracking-tight: -0.02em;
  --tracking-wide: 0.08em;
  --leading-tight: 1.15;
  --leading-body: 1.6;

  /* --- Rythme --- */
  /* Volontairement non uniforme : les blocs respirent différemment selon leur rôle. */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1.25rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-section: clamp(2.5rem, 1.5rem + 4vw, 5.5rem);

  --measure: 62ch;
  --shell-max: 68rem;

  /* --- Formes --- */
  /* Le tranchant est un choix : seuls les jetons et pastilles sont arrondis. */
  --radius-none: 0;
  --radius-chip: 999px;
  --rule-hairline: 1px;
  --rule-heavy: 3px;

  /* --- Profondeur --- */
  --shadow-raised: 0 1px 2px rgb(22 22 22 / 6%), 0 8px 24px -12px rgb(22 22 22 / 18%);
  --shadow-sticky: 0 1px 0 var(--color-rule), 0 10px 20px -16px rgb(22 22 22 / 40%);

  /* --- Mouvement --- */
  --duration-fast: 120ms;
  --duration-normal: 240ms;
  --duration-slow: 420ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quad: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Thème sombre : appliqué au réglage système, sauf choix explicite du thème clair. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='clair']) {
    --color-paper: #101014;
    --color-surface: #17171d;
    --color-surface-sunken: #0b0b0e;
    --color-ink: #edebe6;
    --color-ink-muted: #a4a29c;
    --color-ink-faint: #75736e;
    --color-rule: #2d2d36;
    --color-rule-strong: #454550;

    /* Le bleu République est illisible sur fond sombre : on remonte la clarté
       en conservant la teinte, plutôt que d'inverser la palette. */
    --color-blue: #9d9dff;
    --color-blue-hover: #b8b8ff;
    --color-blue-wash: #1c1c3a;
    --color-green: #4ac97a;
    --color-green-wash: #12301d;
    --color-red: #ff6b68;
    --color-red-wash: #35161a;
    --color-on-accent: #101014;

    --color-red-ink: #ff6b68;
    --color-green-ink: #4ac97a;

    --viz-bar: var(--color-blue);
    --viz-track: #24242c;
    --viz-threshold: var(--color-ink-faint);

    --shadow-raised: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px -12px rgb(0 0 0 / 70%);
    --shadow-sticky: 0 1px 0 var(--color-rule), 0 10px 20px -16px rgb(0 0 0 / 80%);
  }
}

/* Choix explicite du thème sombre : prioritaire sur le réglage système. */
:root[data-theme='sombre'] {
  --color-paper: #101014;
  --color-surface: #17171d;
  --color-surface-sunken: #0b0b0e;
  --color-ink: #edebe6;
  --color-ink-muted: #a4a29c;
  --color-ink-faint: #75736e;
  --color-rule: #2d2d36;
  --color-rule-strong: #454550;

  --color-blue: #9d9dff;
  --color-blue-hover: #b8b8ff;
  --color-blue-wash: #1c1c3a;
  --color-green: #4ac97a;
  --color-green-wash: #12301d;
  --color-red: #ff6b68;
  --color-red-wash: #35161a;
  --color-on-accent: #101014;

  --color-red-ink: #ff6b68;
  --color-green-ink: #4ac97a;

  --viz-bar: var(--color-blue);
  --viz-track: #24242c;
  --viz-threshold: var(--color-ink-faint);

  --shadow-raised: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px -12px rgb(0 0 0 / 70%);
  --shadow-sticky: 0 1px 0 var(--color-rule), 0 10px 20px -16px rgb(0 0 0 / 80%);
}