/* =========================================================================
   THEME TOKENS — Altius Group, charte graphique édition 1 (août 2026).
   Édite UNIQUEMENT ce fichier pour rebrander. theme.css est figé et lit
   ces variables.

   Les valeurs viennent du nuancier de la charte (p. 10) et de la page
   « Jetons pour l'intégration » (p. 11) — le document est au dépôt, sous
   docs/charte-graphique-altius-group.pdf. Règle posée par la charte :
   UNE SEULE SOURCE — ces jetons, jamais une valeur hexadécimale écrite en
   dur dans un composant.
   ========================================================================= */

:root {
  /* ╔══════════════════════════════════════════════════════════════════════╗
     ║  1. MARQUE — les quatre couleurs nommées de la charte (p. 06)        ║
     ╚══════════════════════════════════════════════════════════════════════╝ */
  --altius-ink:        #101211;   /* Encre — texte, logo, fonds pleins       */
  --altius-paper:      #F4F3F0;   /* Papier — fond par défaut                */
  --altius-clay:       #C6482B;   /* Terre cuite — filet, icône, accents     */
  --altius-clay-light: #E2643F;   /* Terre cuite claire — SUR FOND ENCRE     */

  /* ╔══════════════════════════════════════════════════════════════════════╗
     ║  2. NUANCIER (charte p. 10) — deux gammes de neuf valeurs            ║
     ╚══════════════════════════════════════════════════════════════════════╝ */

  /* Neutre — warm grey, dérivé de l'encre. */
  --neutral-50:  #F4F3F0;
  --neutral-100: #EAE8E3;
  --neutral-200: #D9D6CE;
  --neutral-300: #C2BFB6;
  --neutral-400: #9C9990;
  --neutral-500: #7A7871;
  --neutral-600: #5F5D58;
  --neutral-700: #45443F;
  --neutral-800: #2A2A27;
  --neutral-900: #101211;

  /* Terre cuite. */
  --clay-50:  #FBF0EC;
  --clay-100: #F6DED6;
  --clay-200: #EDBCAC;
  --clay-300: #E29A82;
  --clay-400: #E2643F;
  --clay-500: #C6482B;
  --clay-600: #A93A21;
  --clay-700: #8A2E19;
  --clay-800: #6A2313;
  --clay-900: #4A180D;

  /* États (charte p. 10) — « aucune couleur vive n'est ajoutée ». */
  --state-success: #3F5344;
  --state-warning: #96731C;
  --state-error:   #A93A21;   /* clay-600 : la 500 reste réservée à la marque */
  --state-info:    #45443F;

  /* ╔══════════════════════════════════════════════════════════════════════╗
     ║  3. RÔLES (charte p. 11)                                             ║
     ╚══════════════════════════════════════════════════════════════════════╝ */
  --color-bg:            var(--neutral-50);
  --color-surface:       #FFFFFF;
  --color-surface-muted: var(--neutral-100);
  --color-border:        var(--neutral-200);
  --color-text:          var(--neutral-900);
  --color-text-strong:   var(--neutral-900);
  --color-text-muted:    var(--neutral-600);

  --color-primary:        var(--clay-500);
  --color-primary-hover:  var(--clay-600);
  --color-primary-active: var(--clay-700);
  --color-primary-bg:     var(--clay-50);
  --color-primary-border: var(--clay-200);
  /* Terre cuite 500 sur papier ne fait que 4,3 : 1 — assez pour un gros
     texte ou une icône, pas pour un libellé courant. La charte tranche :
     « pour un lien ou un libellé en petit corps, utiliser clay-700 ». */
  --color-primary-text:   var(--clay-700);
  --color-on-primary:     var(--altius-paper);

  --color-secondary:        var(--neutral-700);
  --color-secondary-hover:  var(--neutral-900);
  --color-secondary-bg:     var(--app-surface);
  --color-secondary-border: var(--neutral-300);
  --color-secondary-text:   var(--neutral-800);

  --color-success:    var(--state-success);
  --color-success-bg: #E4EAE5;
  --color-warning:    var(--state-warning);
  --color-warning-bg: #F5EEDA;
  --color-danger:     var(--state-error);
  --color-danger-bg:  var(--clay-100);
  --color-info:       var(--state-info);
  --color-info-bg:    var(--neutral-100);

  /* ╔══════════════════════════════════════════════════════════════════════╗
     ║  4. PONT VERS theme.css                                              ║
     ║  theme.css nomme « brand-* » et « gray-* » ce que la charte appelle  ║
     ║  terre cuite et neutre. Le pont vit ICI, pour que theme.css reste    ║
     ║  intact et que la charte reste lisible plus haut.                    ║
     ╚══════════════════════════════════════════════════════════════════════╝ */

  /* La gamme est décalée d'un cran : theme.css emploie `brand-600` comme
     couleur de remplissage (boutons, pagination, barres de progression) et
     `brand-700`/`brand-800` comme survol. Aligner brand-600 sur clay-500 fait
     donc tomber le remplissage sur l'ACCENT de la charte et les survols sur
     clay-600/700 — exactement la table des rôles. Un mappage 1:1 aurait mis
     clay-600 partout où la charte demande clay-500. */
  --brand-50:  #FDF7F5;              /* interpolé sous clay-50 : fond très pâle */
  --brand-100: var(--clay-50);
  --brand-200: var(--clay-100);
  --brand-300: var(--clay-200);
  --brand-400: var(--clay-300);
  --brand-500: var(--clay-400);
  --brand-600: var(--clay-500);      /* ACCENT */
  --brand-700: var(--clay-600);      /* ACCENT SURVOL */
  --brand-800: var(--clay-700);      /* liens, texte sur fond pâle */
  --brand-900: var(--clay-800);

  /* Accent de PREMIER PLAN (texte / icône sur surface). Sur papier c'est
     clay-700 ; sur fond encre, clay-400. NE PAS employer comme fond. */
  --accent-fg: var(--clay-700);

  /* Neutres : gray-0 est la surface pleine (blanc sur papier), la suite
     reprend le nuancier warm grey valeur pour valeur. */
  --gray-0:   #FFFFFF;
  --gray-50:  var(--neutral-50);
  --gray-100: var(--neutral-100);
  --gray-200: var(--neutral-200);
  --gray-300: var(--neutral-300);
  --gray-400: var(--neutral-400);
  --gray-500: var(--neutral-500);
  --gray-600: var(--neutral-600);
  --gray-700: var(--neutral-700);
  --gray-800: var(--neutral-800);
  --gray-900: var(--neutral-900);
  --gray-950: var(--neutral-900);    /* rien n'est plus sombre que l'encre */

  /* Teintes OKLCH des états. theme.css les emploie DIRECTEMENT dans quelques
     expressions `oklch(...)` (bordures d'alerte, survols de boutons) : elles
     doivent donc rester, et pointer sur la teinte des couleurs d'état
     ci-dessus, mesurée sur les hex de la charte. */
  --status-success-hue: 152;   /* #3F5344 */
  --status-warning-hue: 85;    /* #96731C */
  --status-danger-hue:  34;    /* #A93A21 */
  --status-info-hue:    97;    /* #45443F */

  /* Les paliers d'état consommés par theme.css. Les valeurs 600 sont celles
     de la charte, au hexadécimal près ; 500 et 100 en sont les déclinaisons. */
  --success-600: var(--state-success);
  --success-500: #4C6452;
  --success-100: #E4EAE5;
  --warning-600: var(--state-warning);
  --warning-500: #AE8722;
  --warning-100: #F5EEDA;
  --danger-600:  var(--state-error);
  --danger-500:  var(--clay-600);
  --danger-100:  var(--clay-100);
  --info-600:    var(--state-info);
  --info-500:    var(--neutral-600);
  --info-100:    var(--neutral-100);

  /* ╔══════════════════════════════════════════════════════════════════════╗
     ║  5. TYPOGRAPHIE (charte p. 07 et p. 12)                              ║
     ╚══════════════════════════════════════════════════════════════════════╝ */
  /* Archivo pour TOUT : logotype, titres, tableaux, corps de texte. Une seule
     famille, trois graisses. IBM Plex Mono pour le code et les données. */
  --font-sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* Échelle éditoriale de la charte — celle des PAGES publiques.
     (corps / interligne · graisse · interlettrage) */
  --text-display:    48px;  --text-display-lh:  1.05;  --text-display-track: -0.02em;
  --text-h1:         32px;  --text-h1-lh:       1.15;  --text-h1-track:      -0.02em;
  --text-h2:         24px;  --text-h2-lh:       1.25;
  --text-body:       16px;  --text-body-lh:     1.6;
  --text-small:      14px;  --text-small-lh:    1.5;
  --text-label:      12px;  --text-label-lh:    1.3;   --text-label-track:   0.14em;
  --text-mono:       14px;  --text-mono-lh:     1.6;

  /* Échelle DENSE, distincte : le chrome applicatif (tableau de bord, admin)
     tient à 13 px de base. La charte règle la page, pas la barre d'outils. */
  --fs-xs:   11px;
  --fs-sm:   12px;
  --fs-base: 13px;
  --fs-md:   14px;
  --fs-lg:   16px;
  --fs-xl:   18px;
  --fs-2xl:  22px;
  --fs-3xl:  28px;
  --fs-4xl:  36px;
  --fs-5xl:  48px;

  --lh-tight: 1.15;
  --lh-snug:  1.35;
  --lh-base:  1.5;

  /* ╔══════════════════════════════════════════════════════════════════════╗
     ║  6. RAYONS, OMBRES, ESPACEMENTS, CONTRÔLES, LAYOUT, TRANSITIONS      ║
     ║  Non spécifiés par la charte : conservés tels quels.                 ║
     ╚══════════════════════════════════════════════════════════════════════╝ */
  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-xl: 8px;
  --radius-pill: 999px;

  /* Ombres retintées sur l'encre : une ombre bleutée sur un fond papier chaud
     se voit, et se voit comme une erreur. */
  --shadow-xs: 0 1px 0 0 rgba(16, 18, 17, .04);
  --shadow-sm: 0 1px 2px 0 rgba(16, 18, 17, .07), 0 1px 1px 0 rgba(16, 18, 17, .04);
  --shadow-md: 0 4px 8px -2px rgba(16, 18, 17, .09), 0 2px 4px -2px rgba(16, 18, 17, .05);
  --shadow-lg: 0 12px 24px -8px rgba(16, 18, 17, .13), 0 4px 8px -4px rgba(16, 18, 17, .07);
  --shadow-xl: 0 24px 48px -12px rgba(16, 18, 17, .18);
  --shadow-focus: 0 0 0 3px rgba(198, 72, 43, .28);

  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  --control-h-xs: 24px;
  --control-h-sm: 28px;
  --control-h-md: 32px;
  --control-h-lg: 38px;
  --control-h-xl: 44px;

  --sidebar-w:          240px;
  --sidebar-w-collapsed: 56px;
  --topbar-h:           52px;
  --content-max-w:      1440px;

  --t-fast: 120ms cubic-bezier(.4, 0, .2, 1);
  --t-base: 180ms cubic-bezier(.4, 0, .2, 1);
  --t-slow: 280ms cubic-bezier(.4, 0, .2, 1);
}

/* ═════════════════════════════════════════════════════════════════════════
   SUR FOND ENCRE (charte p. 05) — la gamme neutre s'inverse, la marque non.
   L'accent passe à clay-400 : la terre cuite claire est « uniquement sur
   fond encre », où la teinte pleine perd son contraste (charte p. 06).
   ═════════════════════════════════════════════════════════════════════════ */
[data-bs-theme="dark"] {
  /* theme.css lit `gray-50` comme fond de page et `gray-0` comme surface. Le
     fond de page est donc l'ENCRE elle-même ; les cartes s'en détachent d'un
     cran. Les deux valeurs intermédiaires (gray-0, gray-100) sont interpolées
     entre l'encre et neutral-800 : le nuancier s'arrête à l'encre, une
     interface sombre a besoin d'un cran de relief au-dessus. */
  --gray-0:   #1C1D1A;               /* surface : encre relevée d'un cran   */
  --gray-50:  var(--neutral-900);    /* fond de page = encre                */
  --gray-100: #161715;
  --gray-200: var(--neutral-800);
  --gray-300: #3A3933;
  --gray-400: var(--neutral-700);
  --gray-500: var(--neutral-600);
  --gray-600: var(--neutral-400);    /* texte secondaire, lisible sur encre */
  --gray-700: var(--neutral-300);
  --gray-800: var(--neutral-100);    /* corps de texte                      */
  --gray-900: var(--neutral-50);     /* papier                              */
  --gray-950: #FFFFFF;

  --color-bg:            var(--neutral-900);
  --color-surface:       #1C1D1A;
  --color-surface-muted: #161715;
  --color-border:        var(--neutral-700);
  --color-text:          var(--neutral-50);
  --color-text-strong:   var(--neutral-50);
  --color-text-muted:    var(--neutral-400);

  --color-primary:        var(--clay-400);
  --color-primary-hover:  var(--clay-300);
  --color-primary-active: var(--clay-500);
  --color-primary-bg:     rgba(226, 100, 63, .14);
  --color-primary-border: rgba(226, 100, 63, .34);
  --color-primary-text:   var(--clay-300);
  --color-on-primary:     var(--altius-ink);

  /* « Accent sur fond sombre : clay-400 » (charte p. 11). Contraste mesuré
     par la charte : terre cuite 400 / encre = 5,5 : 1. */
  --accent-fg: var(--clay-400);

  --shadow-xs: 0 1px 0 0 rgba(0, 0, 0, .3);
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .35), 0 1px 1px 0 rgba(0, 0, 0, .25);
  --shadow-md: 0 4px 8px -2px rgba(0, 0, 0, .4), 0 2px 4px -2px rgba(0, 0, 0, .25);
  --shadow-lg: 0 12px 24px -8px rgba(0, 0, 0, .5), 0 4px 8px -4px rgba(0, 0, 0, .3);
  --shadow-xl: 0 24px 48px -12px rgba(0, 0, 0, .6);
  --shadow-focus: 0 0 0 3px rgba(226, 100, 63, .32);
}