/* ==========================================================================
   AXIS — Design tokens (v1.0)
   Source : Brand Book 2026 V6 + axis_tokens.css du brand kit.
   Thème sombre (brun nuit) par défaut ; thème clair en option via
   <html data-theme="light">.

   Légende des commentaires :
   [BB]  = valeur officielle du Brand Book
   [DER] = dérivée d'une couleur officielle (pas dans la palette)
   [PROP]= proposition hors Brand Book, à valider
   ========================================================================== */

/* --- Polices hébergées dans le projet (licence SIL OFL) ------------------ */
@font-face { font-family: 'Montserrat'; font-weight: 400; font-display: swap; src: url('../assets/fonts/Montserrat-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-weight: 600; font-display: swap; src: url('../assets/fonts/Montserrat-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-weight: 700; font-display: swap; src: url('../assets/fonts/Montserrat-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-weight: 800; font-display: swap; src: url('../assets/fonts/Montserrat-ExtraBold.ttf') format('truetype'); }
@font-face { font-family: 'Manrope'; font-weight: 300; font-display: swap; src: url('../assets/fonts/Manrope-Light.ttf') format('truetype'); }
@font-face { font-family: 'Manrope'; font-weight: 400; font-display: swap; src: url('../assets/fonts/Manrope-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Manrope'; font-weight: 500; font-display: swap; src: url('../assets/fonts/Manrope-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Manrope'; font-weight: 600; font-display: swap; src: url('../assets/fonts/Manrope-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Manrope'; font-weight: 700; font-display: swap; src: url('../assets/fonts/Manrope-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Source Code Pro'; font-weight: 400; font-display: swap; src: url('../assets/fonts/SourceCodePro-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Source Code Pro'; font-weight: 500; font-display: swap; src: url('../assets/fonts/SourceCodePro-Medium.ttf') format('truetype'); }

:root {
  /* --- 1. Palette officielle [BB] ---------------------------------------- */
  --axis-brun-nuit:      #1B140E;
  --axis-brun-fonce:     #3A2E22;
  --axis-brun-axis:      #7A5A3A;
  --axis-brun-clair:     #A67B52;
  --axis-sable:          #C9B39A;
  --axis-creme:          #E8E1D7;
  --axis-tache-blanche:  #F6F3ED;
  --axis-gris-terre:     #6B645A;

  /* Dérivés du brun nuit (déjà utilisés dans le kit) [DER] */
  --axis-brun-nuit-raised: #251C14;   /* surface légèrement relevée */
  --axis-brun-nuit-deep:   #120D09;   /* fond le plus profond (dégradé) */

  /* --- 2. Rôles — THÈME SOMBRE (défaut) ---------------------------------- */
  --bg:             var(--axis-brun-nuit);        /* fond de page */
  --bg-sunken:      var(--axis-brun-nuit-deep);   /* sidebar, zones en creux */
  --surface:        var(--axis-brun-nuit-raised); /* cartes, panneaux */
  --surface-raised: #2E2419;                      /* [DER] survol, menus, modales */
  --surface-strong: var(--axis-brun-fonce);       /* en-têtes de table, chips */

  --text:           var(--axis-tache-blanche);    /* 16,4:1 sur bg */
  --text-muted:     var(--axis-sable);            /*  9,0:1 sur bg */
  --text-subtle:    #9A8D7C;                      /* [DER] sable + gris terre, ≥ 5:1 sur surface */
  --text-disabled:  var(--axis-gris-terre);       /* décoratif / désactivé uniquement */

  --border:         rgba(201, 179, 154, 0.12);    /* [DER] sable à 12 % */
  --border-strong:  rgba(201, 179, 154, 0.32);    /* [DER] sable à 32 % */
  --divider:        rgba(201, 179, 154, 0.10);

  --accent:         var(--axis-brun-clair);       /* 4,8:1 sur bg */
  --accent-hover:   #B88B60;                      /* [DER] brun clair éclairci */
  --accent-active:  var(--axis-brun-clair);       /* actif : même teinte + ombre interne (contraste conservé) */
  --accent-text:    #BC906B;                      /* [DER, dégradé du logo] accent en texte/lien : 5,9:1 sur surface */
  --accent-soft:    rgba(166, 123, 82, 0.16);     /* [DER] fonds de sélection */
  --on-accent:      var(--axis-brun-nuit);        /* texte sur accent : 4,8:1 */
  --secondary:      var(--axis-brun-axis);        /* bouton secondaire, 5,7:1 avec texte clair */
  --secondary-hover:#7F6040;                      /* [DER] 5,2:1 avec texte clair */

  --focus-ring:     var(--axis-sable);            /* anneau de focus visible */
  --overlay:        rgba(10, 7, 4, 0.72);         /* [DER] fond de modale */

  /* --- 3. États [PROP validé par AXIS] ----------------------------------- */
  /* Chaque état : couleur de base (barres, pastilles) + texte lisible sur
     fond sombre (≥ 4,5:1) + fond teinté. Les « -text » sont [DER]. */
  --state-success:      #5E7A4F;  --state-success-text: #A9C79A;  --state-success-bg: rgba(94, 122, 79, 0.20);
  --state-warning:      #C58B2A;  --state-warning-text: #E3B25F;  --state-warning-bg: rgba(197, 139, 42, 0.18);
  --state-danger:       #A5453A;  --state-danger-text:  #E8978B;  --state-danger-bg:  rgba(165, 69, 58, 0.22);
  --state-info:         #4F6A7A;  --state-info-text:    #95B4C6;  --state-info-bg:    rgba(79, 106, 122, 0.22);
  --state-neutral:      var(--axis-gris-terre); --state-neutral-text: var(--axis-sable); --state-neutral-bg: rgba(107, 100, 90, 0.26);

  /* Pôles (Brand Book : deux bandes de même importance) [DER] */
  --pole-sponsoring:    var(--axis-brun-clair);
  --pole-marketing:     var(--axis-sable);

  /* --- 4. Typographie ----------------------------------------------------- */
  --font-title: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;  /* titres */
  --font-text:  'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;     /* texte, interface */
  --font-mono:  'Source Code Pro', ui-monospace, 'SFMono-Regular', Menlo, monospace; /* étiquettes, chiffres */

  /* Échelle (base 16 px). Les titres d'écran sont plus petits que ceux des
     supports de communication du Brand Book (48–120 pt) : usage dashboard. */
  --fs-display: 3.5rem;      /* 56 — pages publiques / vide */
  --fs-h1:      2rem;        /* 32 — titre de page */
  --fs-h2:      1.5rem;      /* 24 — titre de section */
  --fs-h3:      1.125rem;    /* 18 — titre de carte */
  --fs-h4:      0.8125rem;   /* 13 — intertitre en capitales */
  --fs-lead:    1.125rem;    /* chapeau */
  --fs-body:    0.9375rem;   /* 15 — interface dense */
  --fs-small:   0.8125rem;   /* 13 */
  --fs-caption: 0.75rem;     /* 12 */
  --fs-label:   0.6875rem;   /* 11 — mono capitales */

  --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800;
  --lh-tight: 1.0; --lh-title: 1.1; --lh-body: 1.45;   /* interlignage Brand Book : 1,45 */
  --tracking-title: -0.02em;     /* « approche -20 » */
  --tracking-h3: 0.08em;         /* « approche +80 » */
  --tracking-label: 0.16em;      /* « approche +160 » */

  /* --- 5. Espacements : unité de 4 px ------------------------------------ */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px;

  /* --- 6. Rayons, bordures, ombres [PROP du kit] -------------------------- */
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-xl: 24px; --radius-pill: 999px;  /* plus arrondis, style Apple */
  --border-width: 1px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.55);
  --glass: rgba(27, 20, 14, 0.72);              /* [DER] barres translucides (flou d'arrière-plan) */
  --glass-blur: saturate(160%) blur(24px);

  /* --- 7. Mise en page ---------------------------------------------------- */
  --grid-columns: 12; --grid-gutter: 24px; --grid-margin: 80px; --container-max: 1440px;
  --sidebar-width: 288px; --sidebar-width-collapsed: 84px; --topbar-height: 72px;
  --control-height: 44px; --control-height-sm: 36px; --control-height-lg: 52px;

  /* --- 8. Mouvement (animations discrètes) -------------------------------- */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --duration-fast: 120ms; --duration: 200ms;

  /* --- 9. Dégradés du logo (usage décoratif uniquement) ------------------- */
  --fond-nuit: radial-gradient(circle at 62% 40%, #251C14, #120D09);

  color-scheme: dark;
}

/* ==========================================================================
   Thème CLAIR (option) — « Institutionnel » du Brand Book : tache blanche /
   brun foncé / accent brun AXIS.  Le brun clair en petit texte est évité.
   ========================================================================== */
[data-theme="light"] {
  --bg:             var(--axis-tache-blanche);
  --bg-sunken:      var(--axis-creme);
  --surface:        #FFFFFF;
  --surface-raised: #FFFFFF;
  --surface-strong: var(--axis-creme);

  --text:           var(--axis-brun-fonce);       /* 11,9:1 */
  --text-muted:     var(--axis-brun-axis);        /*  5,7:1 */
  --text-subtle:    var(--axis-gris-terre);       /*  5,3:1 */
  --text-disabled:  var(--axis-sable);

  --border:         rgba(58, 46, 34, 0.14);
  --border-strong:  rgba(58, 46, 34, 0.30);
  --divider:        rgba(58, 46, 34, 0.08);

  --accent:         var(--axis-brun-axis);        /* accent texte lisible en clair */
  --accent-hover:   #6A4D31;
  --accent-active:  #593F29;
  --accent-text:    var(--axis-brun-axis);
  --accent-soft:    rgba(122, 90, 58, 0.12);
  --on-accent:      var(--axis-tache-blanche);
  --secondary:      var(--axis-sable);
  --secondary-hover:#BBA489;

  --focus-ring:     var(--axis-brun-axis);
  --overlay:        rgba(27, 20, 14, 0.55);

  --state-success-text: #3E5A31; --state-warning-text: #7A5410; --state-danger-text: #8A3027; --state-info-text: #34505F;
  --state-neutral-text: var(--axis-gris-terre);

  --shadow-sm: 0 1px 2px rgba(27, 20, 14, 0.08);
  --shadow-md: 0 10px 30px rgba(27, 20, 14, 0.10);
  --shadow-lg: 0 30px 80px rgba(27, 20, 14, 0.18);
  --glass: rgba(246, 243, 237, 0.75);
  --fond-nuit: none;
  color-scheme: light;
}