/* =========================================================================
   THEME TOKENS — édite UNIQUEMENT ce fichier pour rebrander un projet.
   Tout le reste (theme.css) est figé et lit ces variables.
   ========================================================================= */

:root {
  /* ╔══════════════════════════════════════════════════════════════════════╗
     ║  ÉTAPE 1 — DÉFINIS TES COULEURS DE MARQUE                            ║
     ║  C'est la SEULE chose à changer pour reskinner tout le projet.       ║
     ║  Tout le reste s'adapte automatiquement.                             ║
     ╚══════════════════════════════════════════════════════════════════════╝ */

  /* AltiusForms : sarcelle du logo #088178 → oklch(54.4% 0.094 186) */
  --brand-hue: 186;
  --brand-chroma: 0.094;

  /* Accent : la même famille, utilisée avec retenue (direction « Net »). */
  --accent-hue: 186;
  --accent-chroma: 0.094;
  --color-accent:        oklch(69% var(--accent-chroma) var(--accent-hue));        /* ≈ #ff5757 */
  --color-accent-hover:  oklch(62% calc(var(--accent-chroma) * 0.95) var(--accent-hue));
  --color-accent-bg:     oklch(95% calc(var(--accent-chroma) * 0.20) var(--accent-hue));
  --color-accent-text:   oklch(40% calc(var(--accent-chroma) * 0.85) var(--accent-hue));


  /* ╔══════════════════════════════════════════════════════════════════════╗
     ║  COULEURS SÉMANTIQUES                                                ║
     ║  Les noms simples utilisés partout dans le thème.                    ║
     ║  Par défaut, ils dérivent de --brand-hue ci-dessus.                  ║
     ╚══════════════════════════════════════════════════════════════════════╝ */

  /* PRIMARY — bouton primaire forcé sur la couleur exacte du logo #088178 ;
     les variantes (hover/active, bg, border, text) restent dérivées de la
     scale brand-* pour cohérence avec badges & focus ring. */
  --color-primary:        #088178;
  --color-primary-hover:  var(--brand-700);
  --color-primary-active: var(--brand-800);
  --color-primary-bg:     var(--brand-50);      /* fond pâle, ex: badges */
  --color-primary-border: var(--brand-200);     /* bordure pâle */
  --color-primary-text:   var(--brand-800);     /* texte sur fond pâle */
  --color-on-primary:     #fff;                 /* texte sur fond plein */

  /* SECONDARY — boutons .btn-secondary, surfaces neutres */
  --color-secondary:        var(--gray-700);
  --color-secondary-hover:  var(--gray-900);
  --color-secondary-bg:     var(--app-surface);   /* fond du bouton */
  --color-secondary-border: var(--gray-300);
  --color-secondary-text:   var(--gray-800);

  /* SUCCESS / WARNING / DANGER / INFO — statuts (indépendants de la marque) */
  --color-success:    var(--success-600);
  --color-success-bg: var(--success-100);
  --color-warning:    var(--warning-600);
  --color-warning-bg: var(--warning-100);
  --color-danger:     var(--danger-600);
  --color-danger-bg:  var(--danger-100);
  --color-info:       var(--info-600);
  --color-info-bg:    var(--info-100);

  /* SURFACE & TEXTE (driven by --gray-*) */
  --color-bg:           var(--gray-50);          /* fond de page */
  --color-surface:      var(--gray-0);           /* cartes, modals */
  --color-surface-muted: var(--gray-100);        /* zones sunken */
  --color-border:       var(--gray-200);
  --color-text:         var(--gray-800);
  --color-text-strong:  var(--gray-950);         /* titres */
  --color-text-muted:   var(--gray-600);         /* sous-titres, helptext */


  /* ╔══════════════════════════════════════════════════════════════════════╗
     ║  ÉCHELLE PRIMAIRE COMPLÈTE (générée par OKLCH, ne pas toucher)       ║
     ║  Utilisée par les classes du thème qui ont besoin de nuances.        ║
     ╚══════════════════════════════════════════════════════════════════════╝ */
  --brand-50:  oklch(96.5% calc(var(--brand-chroma) * 0.30) var(--brand-hue));
  --brand-100: oklch(92%   calc(var(--brand-chroma) * 0.55) var(--brand-hue));
  --brand-200: oklch(85%   calc(var(--brand-chroma) * 0.80) var(--brand-hue));
  --brand-300: oklch(76%   calc(var(--brand-chroma) * 1.05) var(--brand-hue));
  --brand-400: oklch(68%   calc(var(--brand-chroma) * 1.20) var(--brand-hue));
  --brand-500: oklch(60%   var(--brand-chroma)              var(--brand-hue));
  --brand-600: oklch(52%   calc(var(--brand-chroma) * 0.95) var(--brand-hue));
  --brand-700: oklch(44%   calc(var(--brand-chroma) * 0.85) var(--brand-hue));
  --brand-800: oklch(35%   calc(var(--brand-chroma) * 0.70) var(--brand-hue));
  --brand-900: oklch(27%   calc(var(--brand-chroma) * 0.55) var(--brand-hue));

  /* Accent de PREMIER PLAN (texte/icône sur surface) — le theme.css Anw
     référence ce token pour les liens/hover/onglets. S'éclaircit en mode
     sombre (bloc [data-bs-theme=dark] plus bas). NE PAS utiliser comme fond. */
  --accent-fg: var(--brand-700);

  /* ─── Neutres (cool slate, légère teinte bleutée) ─────────────────── */
  --neutral-hue: 235;
  --neutral-chroma: 0.012;

  --gray-0:   #ffffff;
  --gray-50:  oklch(98.5% calc(var(--neutral-chroma) * 0.4) var(--neutral-hue));
  --gray-100: oklch(96.5% calc(var(--neutral-chroma) * 0.6) var(--neutral-hue));
  --gray-200: oklch(92%   calc(var(--neutral-chroma) * 0.8) var(--neutral-hue));
  --gray-300: oklch(86%   var(--neutral-chroma)             var(--neutral-hue));
  --gray-400: oklch(72%   calc(var(--neutral-chroma) * 1.2) var(--neutral-hue));
  --gray-500: oklch(58%   calc(var(--neutral-chroma) * 1.4) var(--neutral-hue));
  --gray-600: oklch(46%   calc(var(--neutral-chroma) * 1.4) var(--neutral-hue));
  --gray-700: oklch(36%   calc(var(--neutral-chroma) * 1.3) var(--neutral-hue));
  --gray-800: oklch(24%   calc(var(--neutral-chroma) * 1.1) var(--neutral-hue));
  --gray-900: oklch(16%   calc(var(--neutral-chroma) * 0.9) var(--neutral-hue));
  --gray-950: oklch(10%   calc(var(--neutral-chroma) * 0.7) var(--neutral-hue));

  /* ─── 3. STATUTS (figés, pas dépendants de la marque) ────────────────── */
  --status-success-hue: 152;
  --status-warning-hue: 50;
  --status-danger-hue:  22;
  --status-info-hue:    220;

  --success-500: oklch(58% 0.14 var(--status-success-hue));
  --success-600: oklch(50% 0.13 var(--status-success-hue));
  --success-100: oklch(94% 0.06 var(--status-success-hue));
  --warning-500: oklch(72% 0.16 var(--status-warning-hue));
  --warning-600: oklch(62% 0.15 var(--status-warning-hue));
  --warning-100: oklch(95% 0.08 var(--status-warning-hue));
  --danger-500:  oklch(60% 0.20 var(--status-danger-hue));
  --danger-600:  oklch(52% 0.19 var(--status-danger-hue));
  --danger-100:  oklch(95% 0.04 var(--status-danger-hue));
  --info-500:    oklch(60% 0.14 var(--status-info-hue));
  --info-600:    oklch(52% 0.13 var(--status-info-hue));
  --info-100:    oklch(95% 0.04 var(--status-info-hue));

  /* ─── Collaboration (accent violet, features temps réel) ─────────────── */
  --collab-hue: 285;
  --collab-500: oklch(60% 0.17 var(--collab-hue));  /* ≈ #7b68ee */
  --collab-600: oklch(52% 0.16 var(--collab-hue));
  --collab-100: oklch(94% 0.06 var(--collab-hue));

  /* ─── 4. RAYONS (« Net » : 6 px les champs, 8 px les cartes) ─────────── */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --radius-pill: 999px;

  /* ─── 5. OMBRES (subtiles, fonctionnelles) ───────────────────────────── */
  /* « Net » : les surfaces se séparent par un filet de 1 px, presque sans ombre. */
  --shadow-xs: none;
  --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, .04);
  --shadow-md: 0 1px 2px 0 rgba(15, 23, 42, .05);
  --shadow-lg: 0 12px 24px -8px rgba(15, 23, 42, .12), 0 4px 8px -4px rgba(15, 23, 42, .06);
  --shadow-xl: 0 24px 48px -12px rgba(15, 23, 42, .18);
  --shadow-focus: 0 0 0 3px oklch(60% var(--brand-chroma) var(--brand-hue) / .25);

  /* ─── 6. ÉCHELLE D'ESPACEMENT (compact / dense) ──────────────────────── */
  --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;

  /* ─── 7. TYPOGRAPHIE ─────────────────────────────────────────────────── */
  /* IBM Plex, servie par l'instance (static/vendors/fonts/ibm-plex). */
  --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-heading: var(--font-sans);
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

  --fs-xs:   11px;
  --fs-sm:   12px;
  --fs-base: 14px;
  --fs-md:   15px;
  --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;

  /* ─── 8. HAUTEURS DE CONTRÔLES (compact) ─────────────────────────────── */
  --control-h-xs: 24px;
  --control-h-sm: 32px;
  --control-h-md: 40px;   /* défaut */
  --control-h-lg: 44px;
  --control-h-xl: 44px;

  /* ─── 9. LAYOUT ──────────────────────────────────────────────────────── */
  --sidebar-w:          240px;
  --sidebar-w-collapsed: 56px;
  --topbar-h:           52px;
  --content-max-w:      1440px;

  /* ─── 10. TRANSITIONS ────────────────────────────────────────────────── */
  --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);
}

/* ═════════════════════════════════════════════════════════════════════════
   POUR LE DARK MODE — on inverse seulement les neutres.
   La marque reste identique (OKLCH garantit le contraste).
   ═════════════════════════════════════════════════════════════════════════ */
[data-bs-theme="dark"] {
  --gray-0:   oklch(11% calc(var(--neutral-chroma) * 0.7) var(--neutral-hue));
  --gray-50:  oklch(14% calc(var(--neutral-chroma) * 0.8) var(--neutral-hue));
  --gray-100: oklch(17% calc(var(--neutral-chroma) * 0.9) var(--neutral-hue));
  --gray-200: oklch(22% calc(var(--neutral-chroma) * 1.0) var(--neutral-hue));
  --gray-300: oklch(28% calc(var(--neutral-chroma) * 1.1) var(--neutral-hue));
  --gray-400: oklch(40% calc(var(--neutral-chroma) * 1.2) var(--neutral-hue));
  --gray-500: oklch(55% calc(var(--neutral-chroma) * 1.3) var(--neutral-hue));
  --gray-600: oklch(68% calc(var(--neutral-chroma) * 1.2) var(--neutral-hue));
  --gray-700: oklch(78% calc(var(--neutral-chroma) * 1.0) var(--neutral-hue));
  --gray-800: oklch(88% calc(var(--neutral-chroma) * 0.8) var(--neutral-hue));
  --gray-900: oklch(95% calc(var(--neutral-chroma) * 0.5) var(--neutral-hue));
  --gray-950: #ffffff;

  /* Accent lisible sur fond sombre (plus clair que brand-700). */
  --accent-fg: var(--brand-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);
}