/**
 * OptiGest360° — Design System v2 (corail) — OVERRIDE ADDITIF
 * ============================================================
 * Refonte UI (juin 2026). Cette feuille NE REMPLACE PAS le bundle
 * design-system.css : elle est chargée APRÈS et redéfinit les tokens
 * --ds-* uniquement quand l'attribut html[data-ds-v2] est présent
 * (posé côté serveur quand feature_enabled('design_system_v2') == true).
 *
 * Flag OFF  → cette feuille n'est pas chargée → UI actuelle (vert) intacte.
 * Flag ON   → tous les composants token-driven basculent sur la palette
 *             corail + neutres warm-gray + fontes Sora / Hanken Grotesk /
 *             JetBrains Mono, rayons et ombres revus.
 *
 * Source de vérité : tokens.css du paquet design (Claude Design).
 * Spécificités :
 *   html[data-ds-v2]                      = (0,1,1)  → mode clair v2
 *   html[data-ds-v2][data-theme="dark"]   = (0,2,1)  → mode sombre v2
 * Le bloc sombre l'emporte sur dark-theme.css ([data-theme="dark"] = (0,1,0))
 * et sur le bloc clair v2, donc le dark mode reste cohérent.
 */

/* ============================================================
   MODE CLAIR — html[data-ds-v2]
   ============================================================ */
html[data-ds-v2] {
    color-scheme: light;

    /* ── Primary (corail) ── */
    --ds-primary-50:  #FFF1ED;
    --ds-primary-100: #FDE3DB;
    --ds-primary-200: #FBC8B8;
    --ds-primary-300: #F7A48C;
    --ds-primary-400: #F4805F;
    --ds-primary-500: #F2664E; /* base */
    --ds-primary-600: #E0543C;
    --ds-primary-700: #BC4026;
    --ds-primary-800: #8F3220;
    --ds-primary-900: #6B281B;

    /* Le brand "actif/bouton" v2 est la base 500 (corail), pas le 700.
       On réaligne donc les alias sémantiques. */
    --ds-primary:        var(--ds-primary-500);
    --ds-primary-rgb:    242, 102, 78; /* #F2664E — corail clair, pour les rgba() de la base */
    --ds-primary-hover:  var(--ds-primary-600);
    --ds-primary-active: var(--ds-primary-700);
    --ds-primary-light:  var(--ds-primary-100);

    /* ── Secondary (or chaud / ambre) ── */
    --ds-secondary-50:  #FCF2DC;
    --ds-secondary-100: #FBE6B3;
    --ds-secondary-200: #F7D580;
    --ds-secondary-300: #F0BE45;
    --ds-secondary-400: #ECB02A;
    --ds-secondary-500: #E8A317; /* base */
    --ds-secondary-600: #C2870E;
    --ds-secondary-700: #946708;
    --ds-secondary-800: #6F4D08;
    --ds-secondary-900: #4E3606;
    --ds-secondary:        var(--ds-secondary-500);
    --ds-secondary-hover:  var(--ds-secondary-600);
    --ds-secondary-light:  var(--ds-secondary-50);

    /* ── Neutres (warm gray) ── */
    --ds-gray-50:  #FCFBF9;
    --ds-gray-100: #F4F1EC;
    --ds-gray-200: #ECE7DF;
    --ds-gray-300: #DDD7CD;
    --ds-gray-400: #B7AEA2;
    --ds-gray-500: #8C8378;
    --ds-gray-600: #6B6259;
    --ds-gray-700: #4A443D;
    --ds-gray-800: #2A2622;
    --ds-gray-900: #1B1815;

    /* ── Sémantiques (interpolées autour des stops DS 50/500/600/700) ── */
    --ds-success-50:  #E7F6EF; --ds-success-100: #C7EBD9; --ds-success-200: #98DABA;
    --ds-success-300: #5FC597; --ds-success-400: #34B07E; --ds-success-500: #1E9E6A;
    --ds-success-600: #157E54; --ds-success-700: #0F5E3F; --ds-success-800: #0B472F; --ds-success-900: #07301F;

    --ds-warning-50:  #FCF2DC; --ds-warning-100: #F8E4B5; --ds-warning-200: #F3D384;
    --ds-warning-300: #EDBE4D; --ds-warning-400: #ECB02A; --ds-warning-500: #E8A317;
    --ds-warning-600: #C2870E; --ds-warning-700: #946708; --ds-warning-800: #6E4F08; --ds-warning-900: #4A3405;

    --ds-danger-50:  #FCE9EC; --ds-danger-100: #F8CCD3; --ds-danger-200: #F2A2AF;
    --ds-danger-300: #EB7488; --ds-danger-400: #E55870; --ds-danger-500: #E0445B;
    --ds-danger-600: #C5384C; --ds-danger-700: #9C2A3A; --ds-danger-800: #74202C; --ds-danger-900: #4E161E;

    --ds-info-50:  #E9F1FC; --ds-info-100: #CADDF7; --ds-info-200: #9DC0EF;
    --ds-info-300: #6BA0E6; --ds-info-400: #4E8CDF; --ds-info-500: #3B7DD8;
    --ds-info-600: #2E63B0; --ds-info-700: #234A85; --ds-info-800: #1A375F; --ds-info-900: #11233D;

    /* ── Aliases sémantiques de couleur ── */
    --ds-success:       var(--ds-success-500);
    --ds-success-hover: var(--ds-success-600);
    --ds-success-light: var(--ds-success-50);
    --ds-warning:       var(--ds-warning-500);
    --ds-warning-hover: var(--ds-warning-600);
    --ds-warning-light: var(--ds-warning-50);
    --ds-danger:        var(--ds-danger-500);
    --ds-danger-hover:  var(--ds-danger-600);
    --ds-danger-light:  var(--ds-danger-50);
    --ds-info:          var(--ds-info-500);
    --ds-info-hover:    var(--ds-info-600);
    --ds-info-light:    var(--ds-info-50);

    /* ── Palette étendue alignée data-viz DS ── */
    --ds-purple-500: #A05AC4; --ds-purple-600: #8B45B0;
    --ds-pink-500:   #C4567E;
    --ds-orange-200: #FBC8B8; --ds-orange-500: #C2632B; --ds-orange-800: #6B281B;
    --ds-indigo-500: #5B6CD4; --ds-indigo-600: #4756B8;

    /* ── Rôles : surfaces / texte / bordures (warm) ── */
    --ds-bg-primary:    #FFFFFF;       /* surface DS */
    --ds-bg-secondary:  #FCFBF9;       /* bg DS */
    --ds-bg-tertiary:   #F4F1EC;       /* surface-2 DS */
    --ds-bg-inverse:    #1B1815;
    --ds-bg-overlay:    rgba(27, 24, 21, 0.48);

    --ds-text-primary:   #1B1815;
    --ds-text-secondary: #4A443D;
    --ds-text-tertiary:  #6B6259;
    --ds-text-muted:     #8C8378;
    --ds-text-disabled:  #B7AEA2;
    --ds-text-inverse:   #FFFFFF;

    --ds-border-default: #ECE7DF;
    --ds-border-strong:  #DDD7CD;
    --ds-border-subtle:  #F4F1EC;
    --ds-border-light:   #F4F1EC;
    --ds-border-color:   #ECE7DF;

    /* ── Typographie ── */
    --ds-font-sans: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                    Roboto, 'Helvetica Neue', Arial, sans-serif;
    --ds-font-display: 'Sora', 'Hanken Grotesk', sans-serif;
    --ds-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono',
                    Menlo, Consolas, 'Courier New', monospace;
    --ds-font-family: var(--ds-font-sans);

    /* ── Rayons (plus arrondis, alignés DS) ── */
    --ds-radius-sm:   6px;
    --ds-radius-base: 8px;
    --ds-radius-md:   10px;  /* boutons / inputs */
    --ds-radius-lg:   14px;  /* cartes */
    --ds-radius-xl:   20px;  /* modales */
    --ds-radius-2xl:  28px;
    --ds-radius-3xl:  32px;

    /* ── Ombres (warm) ── */
    --ds-shadow-xs:   0 1px 2px rgba(27, 24, 21, 0.06);
    --ds-shadow-sm:   0 2px 6px rgba(27, 24, 21, 0.08);
    --ds-shadow-base: 0 8px 20px -8px rgba(27, 24, 21, 0.16);
    --ds-shadow-md:   0 8px 20px -8px rgba(27, 24, 21, 0.16);
    --ds-shadow-lg:   0 18px 40px -16px rgba(27, 24, 21, 0.22);
    --ds-shadow-xl:   0 30px 70px -28px rgba(27, 24, 21, 0.30);
    --ds-shadow-2xl:  0 30px 70px -28px rgba(27, 24, 21, 0.34);

    /* ── Focus ring (corail) ── */
    --ds-focus-ring: 0 0 0 3px rgba(242, 102, 78, 0.45);

    /* ── Alias de marque pour ré-router les hex hardcodés des vues Blade ──
       Définis UNIQUEMENT ici (donc seulement quand le flag est ON). Les vues
       utilisent `var(--ogv2-x, #hexLegacy)` : flag OFF → alias indéfini →
       fallback = hex legacy d'origine (rendu byte-identique garanti) ;
       flag ON → corail. Les variantes claire/sombre suivent automatiquement
       --ds-primary-* (redéfini par thème). */
    --ogv2-green:        var(--ds-primary-500);   /* legacy #06352c (marque pleine) */
    --ogv2-green-mid:    var(--ds-primary-600);   /* legacy #0a4d3f / #0f4a3b */
    --ogv2-green-dark:   var(--ds-primary-700);   /* legacy #042a23 */
    --ogv2-green-darker: var(--ds-primary-800);   /* legacy #03201a */
    --ogv2-green-black:  #3a1410;                 /* legacy #0b1a17 (quasi-noir warm) */
    --ogv2-gold:         var(--ds-secondary-500); /* legacy #a5956e */
    --ogv2-gold-dark:    var(--ds-secondary-600); /* legacy #8a7b57 */
    --ogv2-gold-light:   var(--ds-secondary-100); /* legacy #ebe6d8 */
    --ogv2-indigo:       var(--ds-primary-500);   /* legacy #4F46E5 / #6366F1 (ancien primaire indigo) */
    --ogv2-indigo-dark:  var(--ds-primary-700);   /* legacy #4338CA */
    --ogv2-indigo-light: var(--ds-primary-300);   /* legacy #818CF8 */

    /* meta */
    --ds-meta-theme-color: #F2664E;
}

/* Police de corps : on la pose explicitement (l'app dépend sinon du preflight
   Tailwind/Vite pour le font-family du body — absent si le build Vite n'a pas
   tourné → fallback navigateur serif/Times). v2 doit être auto-suffisant. */
html[data-ds-v2],
html[data-ds-v2] body { font-family: var(--ds-font-sans); }

/* Titres en Sora (display) lorsque v2 est actif. */
html[data-ds-v2] h1,
html[data-ds-v2] h2,
html[data-ds-v2] h3,
html[data-ds-v2] h4,
html[data-ds-v2] h5,
html[data-ds-v2] h6,
html[data-ds-v2] .ds-heading,
html[data-ds-v2] .ds-page-title,
html[data-ds-v2] .ds-card__title,
html[data-ds-v2] .ds-topbar__title,
html[data-ds-v2] .sidebar-title h2 {
    font-family: var(--ds-font-display);
    letter-spacing: -0.01em;
}

/* Chiffres / montants / codes comptables en JetBrains Mono. */
html[data-ds-v2] .ds-amount,
html[data-ds-v2] .ds-mono,
html[data-ds-v2] .amount,
html[data-ds-v2] .montant,
html[data-ds-v2] code,
html[data-ds-v2] kbd,
html[data-ds-v2] .tabular-nums {
    font-family: var(--ds-font-mono);
    font-feature-settings: 'tnum' 1;
}

/* ============================================================
   MODE SOMBRE — html[data-ds-v2][data-theme="dark"]
   (spécificité (0,2,1) : l'emporte sur dark-theme.css et sur le bloc clair)
   ============================================================ */
html[data-ds-v2][data-theme="dark"] {
    color-scheme: dark;

    /* Neutres warm inversés (50 = surface la plus sombre … 900 = texte clair) */
    --ds-gray-50:  #232019;
    --ds-gray-100: #2C2822;
    --ds-gray-200: #38332B;
    --ds-gray-300: #4A443D;
    --ds-gray-400: #6B6259;
    --ds-gray-500: #948B7F;
    --ds-gray-600: #B7AEA2;
    --ds-gray-700: #C9C1B5;
    --ds-gray-800: #E6E0D6;
    --ds-gray-900: #F4F1EC;

    /* Chrome (sidebar/topbar utilisent var(--ds-white)) → surface sombre warm */
    --ds-white: #232019;
    --ds-black: #F4F1EC;

    /* Primaire éclaircie pour contraste sur fond sombre */
    --ds-primary-500: #FF7D63;
    --ds-primary-600: #F2664E;
    --ds-primary:        #FF7D63;
    --ds-primary-rgb:    255, 125, 99; /* #FF7D63 — corail éclairci (mode sombre) */
    --ds-primary-hover:  #F2664E;
    --ds-primary-active: #E0543C;
    --ds-primary-50:  rgba(255, 125, 99, 0.08);
    --ds-primary-100: rgba(255, 125, 99, 0.15);
    --ds-primary-200: rgba(255, 125, 99, 0.25);
    --ds-primary-light: rgba(255, 125, 99, 0.15);

    /* Sémantiques : tints translucides + 600 éclaircis (visibilité dark) */
    --ds-success-50: rgba(30, 158, 106, 0.10); --ds-success-100: rgba(30, 158, 106, 0.18);
    --ds-success-200: rgba(30, 158, 106, 0.26); --ds-success-light: rgba(30, 158, 106, 0.16);
    --ds-success-500: #2BB47B; --ds-success-600: #34C28A;

    --ds-warning-50: rgba(232, 163, 23, 0.10); --ds-warning-100: rgba(232, 163, 23, 0.18);
    --ds-warning-200: rgba(232, 163, 23, 0.26); --ds-warning-light: rgba(232, 163, 23, 0.16);
    --ds-warning-500: #EFB43E; --ds-warning-600: #F2C254;

    --ds-danger-50: rgba(224, 68, 91, 0.10); --ds-danger-100: rgba(224, 68, 91, 0.18);
    --ds-danger-200: rgba(224, 68, 91, 0.26); --ds-danger-light: rgba(224, 68, 91, 0.16);
    --ds-danger-500: #F0556C; --ds-danger-600: #F46E82;

    --ds-info-50: rgba(59, 125, 216, 0.10); --ds-info-100: rgba(59, 125, 216, 0.18);
    --ds-info-200: rgba(59, 125, 216, 0.26); --ds-info-light: rgba(59, 125, 216, 0.16);
    --ds-info-500: #5B95E2; --ds-info-600: #76A8E8;

    /* Rôles : surfaces / texte / bordures (dark — variante claire du fond sidebar
       #121009 ; warm-charcoal peu saturé : cohérent avec la sidebar, ni gris froid
       ni marron saturé). Échelle : sidebar (plus sombre) < bg principal < cartes. */
    --ds-bg-primary:   #242220;   /* cartes / surfaces */
    --ds-bg-secondary: #1C1A16;   /* fond principal — variante + claire que la sidebar */
    --ds-bg-tertiary:  #2D2A25;   /* surface-2 */
    --ds-bg-inverse:   #F4F1EC;
    --ds-bg-overlay:   rgba(0, 0, 0, 0.6);

    --ds-text-primary:   #F4F1EC;
    --ds-text-secondary: #C9C1B5;
    --ds-text-tertiary:  #948B7F;
    --ds-text-muted:     #948B7F;
    --ds-text-disabled:  #6B6259;
    --ds-text-inverse:   #1C1A16;

    --ds-border-default: #38342D;
    --ds-border-strong:  #47433A;
    --ds-border-subtle:  #2D2A25;
    --ds-border-light:   #2D2A25;
    --ds-border-color:   #38342D;

    --ds-focus-ring: 0 0 0 3px rgba(255, 125, 99, 0.5);
    --ds-meta-theme-color: #1B1815;
}