/* =========================================================================
   Tokens de l'identité ALEX · charte design OVALE OS v2 du 13.10.2026.
   Les valeurs viennent de la charte (ovale.css des maquettes, voir
   ovale-reference.css) et sont rangées sous les NOMS de variables du socle
   (app.css en dépend). tokens.py a seulement servi de point de départ.

   Règles de la charte : vert et orange d'OVALE, bleu réservé à l'IA.
   Orange = action principale (CTA). Vert forêt = navigation, encre des titres.
   ========================================================================= */
:root {
  /* Marque = orange OVALE (CTA) */
  --brand-50: #FFF4E8;
  --brand-100: #FDE6CC;
  --brand-200: #F9CF9F;
  --brand-300: #F2AE63;
  --brand-400: #EC9A41;
  --brand-500: #E48B2E;
  --brand-600: #C8701A;
  --brand-700: #A3570F;
  --brand-800: #7F430B;
  --brand-900: #5A2F07;
  --on-brand: #1B2E20;

  /* Neutres (encre) · gris verts de la charte */
  --ink-50: #F8F9F6;
  --ink-100: #EEF0EB;
  --ink-200: #DDE0D8;
  --ink-300: #BEC3BA;
  --ink-400: #8E968B;
  --ink-500: #6F776C;
  --ink-600: #565E54;
  --ink-700: #3F463E;
  --ink-800: #2A302B;
  --ink-900: #1C211D;

  /* Accent = vert OVALE (graphiques, éléments secondaires, jamais un 2e bouton principal) */
  --accent-50: #EEF5EF;
  --accent-100: #D9EADC;
  --accent-200: #B5D3BC;
  --accent-300: #7FB08E;
  --accent-400: #4D8A61;
  --accent-500: #2B6340;
  --accent-600: #234F34;
  --accent-700: #1F4430;
  --accent-800: #1A2C1E;
  --accent-900: #111D14;
  --accent: #2B6340;  --on-accent: #FFFFFF;

  /* États (charte) */
  --success: #2E9D5B;  --success-bg: #E3F4EA;  --success-fg: #17703D;  --success-border: #BFE3CD;
  --warning: #7A5A00;  --warning-bg: #FDF3D3;  --warning-fg: #7A5A00;  --warning-bar: #E3B100;
  --danger:  #D93B30;  --danger-bg:  #FCE8E6;  --danger-fg:  #B3261E;  --danger-border: #F4C7C2;  --danger-bg-hover: #F9D6D2;
  --info:    #5B8196;  --info-bg:    #E7EFF3;  --info-fg:    #345A6E;  --info-border: #C9DAE3;

  /* Surfaces */
  --surface: #FFFFFF;  --bg: #F3F4F1;  --bg-alt: #F3F4F1;
  --text: #1C211D;  --border: #DDE0D8;
  --topbar-bg: rgba(243,244,241,0.88);
  --backdrop: rgba(17,29,20,0.45);

  /* Barre latérale (vert forêt) */
  --sidebar-bg: #233B27;  --sidebar-fg: #C9D2C7;  --sidebar-fg-strong: #FFFFFF;
  --sidebar-muted: #8FA393;  --sidebar-hover: #2C4A32;  --sidebar-hover-strong: #2C4A32;
  --sidebar-accent: #E48B2E;  --sidebar-border: 0;
  --nav-active-bg: #2C4A32;  --nav-active-fg: #FFFFFF;
  --login-art-bg: #233B27;  --login-art-fg: #FFFFFF;

  /* Formes (charte : boutons 8 px, cartes 14 px, badges en capsule) */
  --radius-btn: 8px;  --radius-nav: 8px;  --radius-badge: 999px;  --radius-pill: 999px;
  --radius-card: 14px;  --radius-field: 8px;  --radius-modal: 18px;  --radius-check: 5px;

  /* Ombres & focus */
  --shadow-1: 0 1px 2px rgba(28,33,29,.06);
  --shadow-2: 0 8px 20px -10px rgba(28,33,29,.18);
  --shadow-3: 0 28px 60px -28px rgba(17,29,20,.45);
  --shadow-brand: 0 10px 22px -12px rgba(228,139,46,.75);
  --btn-base: none;
  --btn-pressed: inset 0 2px 0 rgba(90,47,7,.18);
  --focus-ring: 0 0 0 2px #FFFFFF, 0 0 0 4px #E48B2E;

  /* Typographie & mouvement
     --font-title sert aux éléments d'interface (boutons, onglets, tableaux) : IBM Plex Sans.
     Big Shoulders Display (--font-display) est réservée aux titres de page et aux grands chiffres. */
  --font-title: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --ease: cubic-bezier(.2,.8,.2,1);
  --duration: 160ms;

  /* Mise en page */
  --sidebar-w: 256px;
  --page-pad: 28px;

  /* ---------- Palette nommée de la charte (pour les composants OVALE OS) ---------- */
  --foret: #233B27; --foret-600: #2B6340; --foret-700: #234F34; --foret-900: #1A2C1E; --foret-100: #D9EADC; --foret-50: #EEF5EF;
  --orange: #E48B2E; --orange-300: #F2AE63; --orange-400: #EC9A41; --orange-600: #C8701A; --orange-texte: #A3570F; --orange-doux: #FFF4E8;
  --fond: #F3F4F1; --surface-2: #F8F9F6; --surface-3: #EEF0EB;
  --bordure: #DDE0D8; --bordure-forte: #BEC3BA;
  --texte: #1C211D; --texte-2: #565E54; --texte-3: #6F776C; --encre: #233B27;
  --action: #2B6340; --action-doux: #EEF5EF;
  --ia: #3A66E3; --ia-texte: #2B50C4; --ia-doux: #EEF3FE; --ia-bord: #B6CBFB; --ia-trame: rgba(58,102,227,.10); --sur-ia: #FFFFFF;
  --succes: #17703D; --succes-fond: #E3F4EA; --succes-plein: #2E9D5B;
  --alerte: #7A5A00; --alerte-fond: #FDF3D3; --alerte-plein: #E3B100;
  --erreur: #B3261E; --erreur-fond: #FCE8E6; --erreur-plein: #D93B30;
  --dv1: #2F7A4B; --dv2: #E08429; --dv3: #00839C; --dv4: #B84A6A; --dv5: #A8892A; --grille: #E3E6DF;
  --ombre-cta: 0 10px 22px -12px rgba(228,139,46,.75);
  --ombre-ia: 0 12px 28px -16px rgba(58,102,227,.6);
}