/*
 * Design tokens — À bord (marque blanche, palette JeloBox).
 * Pour re-thémer une nouvelle application, ne modifier que ce fichier.
 * Contrastes vérifiés (WCAG / RGAA 3.2) : voir les commentaires.
 */
:root {
  /* Palette de marque (couleurs du logo, ici JeloBox) : usage décoratif uniquement,
     ne pas les utiliser pour du texte (contraste insuffisant). */
  --brand-1: #0B3C6E;
  --brand-2: #1E88C9;
  --brand-3: #C62828;
  --brand-4: #FFC72C;

  /* Couleurs fonctionnelles, dérivées de la marque et assombries pour l'accessibilité */
  --color-primary: #0B3C6E; /* texte blanc 11,1:1 */
  --color-primary-strong: #0B3C6E; /* texte blanc 11,1:1 : en-tête, bandeau */
  --color-secondary: #C62828; /* texte blanc 5,6:1 */
  --color-accent: #FFC72C; /* toujours en FOND, sous du texte foncé (9,8:1) */
  --color-success: #3F6F0E;
  --color-danger: #C62828;         /* texte blanc 5,6:1 */

  /* Rôles (thème clair) */
  --bg: #F7F8FA;
  --surface: #FFFFFF;
  --text: #1B2633;         /* 14,8:1 sur --bg */
  --text-muted: #526070;   /* 6,2:1 sur --bg */
  --link: #0B3C6E; /* 10,5:1 sur --bg */
  --border: #DDE2E8;
  --border-strong: #7A8797; /* 3,6:1 : bordures de champs (RGAA 3.3) */
  --focus: var(--color-primary);

  --header-bg: var(--color-primary-strong);
  --header-text: #FFFFFF;

  --primary-bg: var(--color-primary);
  --primary-text: #FFFFFF;
  --secondary-bg: var(--color-secondary);
  --secondary-text: #FFFFFF;
  --accent-text: var(--text);      /* 9,1:1 sur --color-accent */
  --danger-bg: var(--color-danger);
  --danger-text: #FFFFFF;
  --danger-link: #B71C1C;  /* lien destructeur (texte rouge gras) : 6,2:1 sur --bg, 6,6:1 sur --surface */

  --info-bg: #E7ECF1;    --info-text: #0B3C6E;
  --success-bg: #EDF6E3; --success-text: #2F5A08;
  --warning-bg: #FFF5D6; --warning-text: #6B4A00;
  --error-bg: #FDECEA;   --error-text: #9E1C1C;
  /* Gris neutre : statuts clos sans enjeu (Hors équipage, Sans réponse) */
  --neutral-bg: #EEF0F3; --neutral-text: #526070; /* 5,6:1 */

  /* Typographie : une seule famille, très lisible */
  --font-body: 'Atkinson Hyperlegible Next Variable', system-ui, sans-serif;
  --font-display: var(--font-body);
  --leading: 1.6;
  --leading-tight: 1.4; /* textes courts en petit corps : aides des champs */
  --measure: 68ch;

  /* Échelle typographique (tierce majeure, fluide entre mobile et bureau) */
  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: clamp(1.2rem, 1.1rem + 0.4vw, 1.4rem);
  --step-2: clamp(1.45rem, 1.3rem + 0.7vw, 1.8rem);
  --step-3: clamp(1.8rem, 1.5rem + 1.4vw, 2.5rem);
  --step-hero: clamp(2rem, 1.2rem + 4.2vw, 4.25rem);

  /* Espacements */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-s: 0.75rem;
  --space-m: 1rem;
  --space-l: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;

  /* Rythme vertical des formulaires (tous les formulaires, style.css « Formulaires ») */
  --form-field-gap: var(--space-l);   /* entre deux champs */
  --form-group-gap: var(--space-xl);  /* avant un groupe (fieldset) et avant les boutons d’action */
  --form-tight-gap: var(--space-2xs); /* dans un champ : libellé, aide, erreur, saisie */
  --gutter: 1rem;          /* marge latérale mobile */
  --max-width: 72rem;

  --radius: 6px;
  --stripe: 4px;           /* épaisseur des repères (page courante, messages) */
}

@media (min-width: 48rem) {
  :root { --gutter: 2rem; }
}

/* Thème sombre : suit la préférence du système */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0F1620;
    --surface: #172130;
    --text: #E6ECF2;        /* 15,1:1 sur --bg */
    --text-muted: #A7B3C2;  /* 8,6:1 */
    --link: #8FA5BC;        /* 8,9:1 */
    --border: #2A3646;
    --border-strong: #6E7E92;
    --focus: #8FA5BC;

    --header-bg: #06213D;

    --primary-bg: #8FA5BC;
    --primary-text: #0F1620;
    --secondary-bg: #DC7A7A;
    --secondary-text: #0F1620;
    --accent-text: #0F1620;
    --danger-bg: #FF8A80;
    --danger-text: #2B0503;
    --danger-link: #FF8A80;  /* 8,0:1 sur --bg, 7,1:1 sur --surface */

    --info-bg: #0E1E31;    --info-text: #99ADC2;
    --success-bg: #1C3310; --success-text: #D2EDB8;
    --warning-bg: #3A2C05; --warning-text: #FFE6A3;
    --error-bg: #3D1210;   --error-text: #FFD4CF;
    --neutral-bg: #1E2733; --neutral-text: #A7B3C2; /* 7,1:1 */
  }
}