/* ============================================================
   Windion — jetons de marque
   ------------------------------------------------------------
   FICHIER GÉNÉRÉ. Ne pas éditer à la main.
   Source : identite/tokens/windion-tokens.json
   Régénérer : python3 identite/tools/sync_tokens.py
   ============================================================ */

:root {
  /* Marque : les trois valeurs qui pilotent tout le reste. */
  --brand-navy: #1a3685;
  --brand-orange: #e25303;
  --brand-paper: #f5f6fa;
  --brand-encre-claire: #e8edfa;

  /* Neutres, teinte 224° : même famille que le bleu de marque.
     Texte courant à partir du 600 ; le 500 est réservé au désactivé. */
  --neutre-0: #fcfcfd;
  --neutre-50: #f7f7f8;
  --neutre-100: #eeeff2;
  --neutre-200: #d9dce2;
  --neutre-300: #b9beca;
  --neutre-400: #9298ab;
  --neutre-500: #70788f;
  --neutre-600: #585f74;
  --neutre-700: #3f465a;
  --neutre-800: #293042;
  --neutre-900: #181e30;
  --neutre-950: #0d1221;

  /* Rampe bleue : même teinte que la marque, le pas 700 EST le bleu
     Windion. Aplats teintés, séries de graphique, pontage Tailwind. */
  --bleu-50: #f0f6ff;
  --bleu-100: #e3edff;
  --bleu-200: #c6d9ff;
  --bleu-300: #9fbbfa;
  --bleu-400: #6b90e6;
  --bleu-500: #3f66c9;
  --bleu-600: #2b4da8;
  --bleu-700: #1a3685;
  --bleu-800: #0f2566;
  --bleu-900: #08184a;
  --bleu-950: #040e31;

  /* séries de graphique, dans l'ordre */
  --serie-1: #1a3685;
  --serie-2: #e25303;
  --serie-3: #93a5d9;
  --serie-4: #586182;

  /* palette catégorielle, distinguée par la teinte */
  --categorie-bleu: #3a64d9;
  --categorie-teal: #0b778d;
  --categorie-vert: #1d7b4f;
  --categorie-olive: #427b1d;
  --categorie-ambre: #876820;
  --categorie-orange: #b44e14;
  --categorie-rose: #cb303f;
  --categorie-violet: #9348ca;
  --categorie-ardoise: #646c84;

  /* Rôles dérivés. */
  --color-ink: #101f4a;
  --color-deep: #0d1c44;
  --color-primary: var(--brand-navy);
  --color-accent: var(--brand-orange);
  --color-sky: #93a5d9;
  --color-mist: var(--brand-paper);
  --color-surface: #ffffff;
  --color-body: #464f70;
  --color-body-soft: #586182;
  --color-surface-2: #f7f7f8;
  --color-border: #d9dce2;
  --color-border-fort: #b9beca;
  --color-border-champ: #70788f;
  --color-help: #585f74;
  --color-disabled: #70788f;
  --color-on-accent: #0d1221;
  --color-on-primary: #ffffff;
  --color-focus: var(--brand-orange);
  --color-accent-fort: #b44e14;
  --color-accent-clair: #fc7326;

  /* États. Chaque teinte s'écarte de l'orange de marque (22°). */
  --etat-succes-texte: #1d7b4f;
  --etat-succes-surface: #edfdf5;
  --etat-succes-bordure: #bae8d3;
  --etat-alerte-texte: #86671f;
  --etat-alerte-surface: #fdf8ed;
  --etat-alerte-bordure: #e8daba;
  --etat-danger-texte: #88202a;
  --etat-danger-surface: #fdedee;
  --etat-danger-bordure: #e8babf;
  --etat-info-texte: #203c88;
  --etat-info-surface: #edf1fd;
  --etat-info-bordure: #bac6e8;

  /* Canaux RVB. Uniquement pour `rgb(var(--rgb-x) / <alpha-value>)`,
     c'est-à-dire le modificateur d'opacité de Tailwind. Inutile en CSS pur. */
  --rgb-brand-navy: 26 54 133;
  --rgb-brand-orange: 226 83 3;
  --rgb-brand-paper: 245 246 250;
  --rgb-brand-encre-claire: 232 237 250;
  --rgb-color-ink: 16 31 74;
  --rgb-color-deep: 13 28 68;
  --rgb-color-primary: var(--rgb-brand-navy);
  --rgb-color-accent: var(--rgb-brand-orange);
  --rgb-color-sky: 147 165 217;
  --rgb-color-mist: var(--rgb-brand-paper);
  --rgb-color-surface: 255 255 255;
  --rgb-color-body: 70 79 112;
  --rgb-color-body-soft: 88 97 130;
  --rgb-color-surface-2: 247 247 248;
  --rgb-color-border: 217 220 226;
  --rgb-color-border-fort: 185 190 202;
  --rgb-color-border-champ: 112 120 143;
  --rgb-color-help: 88 95 116;
  --rgb-color-disabled: 112 120 143;
  --rgb-color-on-accent: 13 18 33;
  --rgb-color-on-primary: 255 255 255;
  --rgb-color-focus: var(--rgb-brand-orange);
  --rgb-color-accent-fort: 180 78 20;
  --rgb-color-accent-clair: 252 115 38;
  --rgb-neutre-0: 252 252 253;
  --rgb-neutre-50: 247 247 248;
  --rgb-neutre-100: 238 239 242;
  --rgb-neutre-200: 217 220 226;
  --rgb-neutre-300: 185 190 202;
  --rgb-neutre-400: 146 152 171;
  --rgb-neutre-500: 112 120 143;
  --rgb-neutre-600: 88 95 116;
  --rgb-neutre-700: 63 70 90;
  --rgb-neutre-800: 41 48 66;
  --rgb-neutre-900: 24 30 48;
  --rgb-neutre-950: 13 18 33;
  --rgb-bleu-50: 240 246 255;
  --rgb-bleu-100: 227 237 255;
  --rgb-bleu-200: 198 217 255;
  --rgb-bleu-300: 159 187 250;
  --rgb-bleu-400: 107 144 230;
  --rgb-bleu-500: 63 102 201;
  --rgb-bleu-600: 43 77 168;
  --rgb-bleu-700: 26 54 133;
  --rgb-bleu-800: 15 37 102;
  --rgb-bleu-900: 8 24 74;
  --rgb-bleu-950: 4 14 49;
  --rgb-etat-succes-texte: 29 123 79;
  --rgb-etat-succes-surface: 237 253 245;
  --rgb-etat-succes-bordure: 186 232 211;
  --rgb-etat-alerte-texte: 134 103 31;
  --rgb-etat-alerte-surface: 253 248 237;
  --rgb-etat-alerte-bordure: 232 218 186;
  --rgb-etat-danger-texte: 136 32 42;
  --rgb-etat-danger-surface: 253 237 238;
  --rgb-etat-danger-bordure: 232 186 191;
  --rgb-etat-info-texte: 32 60 136;
  --rgb-etat-info-surface: 237 241 253;
  --rgb-etat-info-bordure: 186 198 232;

  /* Typographie : une famille, trois rôles via l'axe de largeur. */
  --font-display: "Archivo", system-ui, sans-serif;
  --font-body: "Archivo", system-ui, sans-serif;
  --font-label: "Archivo", system-ui, sans-serif;
  --width-display: 112%;
  --width-body: 100%;
  --width-label: 87%;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Échelle typographique : sept pas, fluides de 360 px à 1440 px. */
  --text-xs: clamp(0.75rem, 0.72rem + 0.12vw, 0.8125rem); /* 12 → 13 px */
  --text-sm: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem); /* 14 → 15 px */
  --text-base: clamp(1rem, 0.955rem + 0.12vw, 1.0625rem); /* 16 → 17 px */
  --text-lg: clamp(1.1875rem, 1.09rem + 0.25vw, 1.3125rem); /* 19 → 21 px */
  --text-xl: clamp(1.5rem, 1.3rem + 0.5vw, 1.75rem); /* 24 → 28 px */
  --text-2xl: clamp(2rem, 1.55rem + 1.33vw, 2.75rem); /* 32 → 44 px */
  --text-3xl: clamp(2.75rem, 2.335rem + 1.85vw, 4rem); /* 44 → 64 px */
  --leading-xs: 1.45;
  --leading-sm: 1.5;
  --leading-base: 1.6;
  --leading-lg: 1.5;
  --leading-xl: 1.3;
  --leading-2xl: 1.15;
  --leading-3xl: 1.03;

  /* Espacement */
  --content-max: 1220px;
  --pad-x: 40px;
  --pad-section: 130px;
  --pad-section-deep: 140px;

  /* Échelle d'espacement, base 4 px. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* Formes */
  --radius-card: 16px;
  --radius-slot: 12px;
  --radius-pill: 999px;
  --radius-field: 8px;
  --radius-tight: 5px;

  /* Ombres */
  --shadow-card: 0 34px 70px -38px rgba(26, 54, 133, 0.45);
  --shadow-cta: 0 12px 24px -10px rgba(26, 54, 133, 0.5);

  /* Élévation */
  --elevation-0: none;
  --elevation-1: 0 1px 2px rgba(13, 18, 33, 0.05);
  --elevation-2: 0 2px 4px rgba(13, 18, 33, 0.05), 0 8px 16px -8px rgba(26, 54, 133, 0.14);
  --elevation-3: 0 4px 8px rgba(13, 18, 33, 0.05), 0 16px 32px -14px rgba(26, 54, 133, 0.22);
  --elevation-4: 0 8px 16px rgba(13, 18, 33, 0.06), 0 32px 64px -24px rgba(26, 54, 133, 0.32);

  /* Mouvement */
  --ease-reveal: cubic-bezier(0.22, 0.61, 0.36, 1);
  --duree-reveal: 0.7s;
  --duration-instant: 90ms;
  --duration-fast: 160ms;
  --duration-normal: 240ms;
  --duration-slow: 400ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* Thème sombre : opt-in explicite. Une surface qui veut suivre le
   réglage système ajoute elle-même la règle @media correspondante. */
[data-theme="sombre"],
.theme-sombre {
  /* Rôles surchargés. */
  --color-surface: #181e30;
  --color-surface-2: #293042;
  --color-mist: #0d1221;
  --color-deep: #0d1221;
  --color-ink: #e8edfa;
  --color-body: #b9beca;
  --color-body-soft: #9298ab;
  --color-help: #9298ab;
  --color-disabled: #70788f;
  --color-border: #293042;
  --color-border-fort: #3f465a;
  --color-border-champ: #9298ab;
  --color-primary: #93a5d9;
  --color-on-primary: #0d1221;

  /* États surchargés. */
  --etat-succes-texte: #83e2b6;
  --etat-succes-surface: #153225;
  --etat-succes-bordure: #2d5844;
  --etat-alerte-texte: #e2c583;
  --etat-alerte-surface: #322915;
  --etat-alerte-bordure: #584b2d;
  --etat-danger-texte: #e2838d;
  --etat-danger-surface: #321518;
  --etat-danger-bordure: #582d31;
  --etat-info-texte: #839ce2;
  --etat-info-surface: #151d32;
  --etat-info-bordure: #2d3858;

  /* Canaux RVB correspondants. */
  --rgb-color-surface: 24 30 48;
  --rgb-color-surface-2: 41 48 66;
  --rgb-color-mist: 13 18 33;
  --rgb-color-deep: 13 18 33;
  --rgb-color-ink: 232 237 250;
  --rgb-color-body: 185 190 202;
  --rgb-color-body-soft: 146 152 171;
  --rgb-color-help: 146 152 171;
  --rgb-color-disabled: 112 120 143;
  --rgb-color-border: 41 48 66;
  --rgb-color-border-fort: 63 70 90;
  --rgb-color-border-champ: 146 152 171;
  --rgb-color-primary: 147 165 217;
  --rgb-color-on-primary: 13 18 33;
  --rgb-etat-succes-texte: 131 226 182;
  --rgb-etat-succes-surface: 21 50 37;
  --rgb-etat-succes-bordure: 45 88 68;
  --rgb-etat-alerte-texte: 226 197 131;
  --rgb-etat-alerte-surface: 50 41 21;
  --rgb-etat-alerte-bordure: 88 75 45;
  --rgb-etat-danger-texte: 226 131 141;
  --rgb-etat-danger-surface: 50 21 24;
  --rgb-etat-danger-bordure: 88 45 49;
  --rgb-etat-info-texte: 131 156 226;
  --rgb-etat-info-surface: 21 29 50;
  --rgb-etat-info-bordure: 45 56 88;
}