/* ============================================================
   KONKI DESIGN TOKENS — source unique des variables CSS
   Direction par défaut : konki (bleu, IBM Plex Sans).
   --font-sans reste IBM Plex Sans dans toutes les directions.
   ============================================================ */

:root {
  /* ── Typographie — familles ── */
  --font-sans: "IBM Plex Sans", "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-display: "Inter Tight", "IBM Plex Sans", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Menlo", monospace;

  /* ── Typographie — ratio mono ── */
  /*   Les polices mono sont optiquement plus grandes à taille égale.
       --fs-mono-scale compense ce décalage visuel (0.9em = 90% du contexte).
       Ajuster si la police mono change.                                      */
  --fs-mono-scale: 1em;

  /* ── Typographie — échelle de tailles ── */
  /*   Ajuster ces 11 variables suffit pour revoir toute la densité visuelle.
       Usage sémantique indicatif :
       --fs-2xs  →  micro-labels, icônes annotées
       --fs-xs   →  labels uppercase, kickers, badges
       --fs-sm   →  captions, meta, sous-titres, infos secondaires
       --fs-base →  corps de texte principal, valeurs de tableau
       --fs-md   →  données importantes, titres de ligne
       --fs-lg   →  titres de section, onglets
       --fs-xl   →  titres de card
       --fs-2xl  →  titres de sous-page, modales
       --fs-3xl  →  titres de page (kv2-page-title)
       --fs-4xl  →  KPIs moyens
       --fs-5xl  →  grands KPIs, chiffres hero                        */
  --fs-2xs:  11px;
  --fs-xs:   12px;
  --fs-sm:   13px;
  --fs-base: 14px;
  --fs-md:   15px;
  --fs-lg:   16px;
  --fs-xl:   19px;
  --fs-2xl:  20px;
  --fs-3xl:  24px;
  --fs-4xl:  28px;
  --fs-5xl:  36px;

  /* ── Espacements ── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 56px;

  /* ── Rayons ── */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-pill: 999px;

  /* ── Densité (overridable) ── */
  --row-h:    44px;
  --pad-card: 20px;
  --pad-row:  12px 18px;

  /* ── Ombres ── */
  --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-2: 0 1px 3px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.03);
  --shadow-3: 0 4px 12px rgba(15, 23, 42, 0.08), 0 12px 28px rgba(15, 23, 42, 0.05);

  /* ── Couleur d'accent (direction "encre" par défaut) ── */
  --accent:      #181a1f;
  --accent-fg:   #f4f3ee;
  --accent-soft: #e8e7df;
  --accent-line: #cfccbe;

  /* ── Surfaces & textes (direction "encre" par défaut) ── */
  --bg:             #f4f3ee;
  --surface:        #ffffff;
  --surface-2:      #fbfaf6;
  --surface-muted:  #ecebe5;
  --line:           #e2e0d6;
  --line-strong:    #cfccbe;
  --ink:            #181a1f;
  --ink-2:          #2d323a;
  --muted:          #6b6f76;
  --muted-2:        #9a9d9d;

  /* ── Sidebar ── */
  --side-w:      240px;
  --side-bg:     #181a1f;
  --side-fg:     #ebe8de;
  --side-muted:  #8b8779;
  --side-active: rgba(244, 243, 238, 0.08);
  --side-line:   rgba(244, 243, 238, 0.07);

  /* ── Statuts ── */
  --success:      #31cea1;
  --success-soft: #edfbf4;
  --warning:      #b45309;
  --warning-soft: #fef3c7;
  --danger:       #ff0000;
  --danger-soft:  #fee2e2;
  --info:         #1d4ed8;
  --info-soft:    #dbeafe;
  --violet:       #6d28d9;
  --violet-soft:  #ede9fe;

  /* ── Overlays / glassmorphism ── */
  --overlay-navy-rgb:   22, 50, 79;
  --overlay-dark-rgb:   17, 24, 39;
  --overlay-modal:      rgba(12, 22, 34, 0.96);
  --photo-viewer-bg:    #0f172a;
  --photo-action-hover: #d8ecff;

  /* ── Badges statut ── */
  --verify-bg:           #fff7ed;
  --verify-fg:           #9a3412;
  --verify-dot:          #f97316;
  --accepted-bg:         #d1fae5;
  --accepted-fg:         #065f46;
  --accepted-dot:        #10b981;
  --covered-bg:          #dbeafe;
  --covered-fg:          #1e3a8a;
  --covered-line:        #93c5fd;
  --refund-bg:           #fee2e2;
  --refund-fg:           #991b1b;
  --refund-line:         #fca5a5;
  --denied-bg:           #fef3c7;
  --denied-fg:           #92400e;
  --denied-line:         #fcd34d;
  --cancelled-bg:        #f3f4f6;
  --cancelled-fg:        #374151;
  --cancelled-line:      #d1d5db;
  --partner-refund-bg:   #fdf2f8;
  --partner-refund-fg:   #9d174d;
  --partner-refund-line: #f9a8d4;
  --badge-dark-bg:       #1f2937;
  --badge-dark-fg:       #f9fafb;
  --badge-dark-line:     #374151;
  --danger-dot:          #ef4444;
  --neutral-dot:         #6b7280;
  --info-line:           #bfdbfe;
  --danger-line:         #fecaca;
  --warning-line:        #fde68a;

  /* ── Overrides Bootstrap 5 ── */
  --bs-body-bg:           var(--bg);
  --bs-body-color:        var(--ink);
  --bs-body-font-family:  var(--font-sans);
  --bs-primary:           var(--accent);
  --bs-primary-rgb:       24, 26, 31;
  --bs-success-rgb:       4, 120, 87;
  --bs-danger-rgb:        185, 28, 28;
  --bs-warning-rgb:       180, 83, 9;
  --bs-info-rgb:          29, 78, 216;
  --bs-border-color:      var(--line);
  --bs-border-radius:     var(--r-md);
  --bs-border-radius-sm:  var(--r-sm);
  --bs-border-radius-lg:  var(--r-lg);
  --bs-card-border-color: var(--line);
  --bs-card-bg:           var(--surface);
  --bs-card-cap-bg:       var(--surface-2);
  --bs-link-color:        var(--accent);
  --bs-link-hover-color:  var(--ink);
}

/* ── Direction "Konki" ── */
/* Nouveau thème — inspiré du dashboard KonkiCom d'origine.
   Accent indigo-violet vif, contraste élevé, typo Inter. */
[data-direction="konki"] {
/*  --accent:      #5856e0; */
  --accent:      #318bff;
  --accent-fg:   #ffffff;
  --accent-soft: #ddeeff;
  --accent-line: #b3d4ff;

  --bg:             #f5f6fb;
  --surface:        #ffffff;
  --surface-2:      #fafbfe;
  --surface-muted:  #eff1f8;
  --line:           #e2e5ee;
  --line-strong:    #c9cedc;

  --ink:            #0a0e1a;
  --ink-2:          #1c2233;
  --muted:          #525a70;
  --muted-2:        #8089a0;

  --side-bg:        #0a0e1a;
  --side-fg:        #e5e7f0;
  --side-muted:     #7e8499;
  --side-active:    rgba(88, 86, 224, 0.18);
  --side-line:      rgba(255, 255, 255, 0.06);

  --bs-primary-rgb: 88, 86, 224;
}

/* ── Direction "Marine" ── */
[data-direction="marine"] {
  --accent:      #1f3b57;
  --accent-fg:   #ffffff;
  --accent-soft: #e6edf4;
  --accent-line: #c7d3e1;
  --bg:             #f5f7fa;
  --surface:        #ffffff;
  --surface-2:      #f9fafc;
  --surface-muted:  #eef1f5;
  --line:           #e4e8ee;
  --line-strong:    #cfd5df;
  --ink:            #0f1d2c;
  --ink-2:          #2a3a4d;
  --muted:          #677488;
  --muted-2:        #98a6b5;
  --side-bg:        #0f1d2c;
  --side-fg:        #e7ecf3;
  --side-muted:     #7a8699;
  --side-active:    rgba(255, 255, 255, 0.07);
  --side-line:      rgba(255, 255, 255, 0.05);
  --bs-primary-rgb: 31, 59, 87;
  --font-display:   "Inter Tight", "Inter", sans-serif;
}

/* ── Direction "Encre" ── */
[data-direction="encre"] {
  --accent:      #181a1f;
  --accent-fg:   #f4f3ee;
  --accent-soft: #e8e7df;
  --accent-line: #cfccbe;
  --bg:             #f4f3ee;
  --surface:        #ffffff;
  --surface-2:      #fbfaf6;
  --surface-muted:  #ecebe5;
  --line:           #e2e0d6;
  --line-strong:    #cfccbe;
  --ink:            #181a1f;
  --ink-2:          #2d323a;
  --muted:          #6b6f76;
  --muted-2:        #9a9d9d;
  --side-bg:        #181a1f;
  --side-fg:        #ebe8de;
  --side-muted:     #8b8779;
  --side-active:    rgba(244, 243, 238, 0.08);
  --side-line:      rgba(244, 243, 238, 0.07);
  --bs-primary-rgb: 24, 26, 31;
  --font-display:   "Instrument Serif", "Tiempos Headline", serif;
}

/* ── Direction "Graphite" ── */
[data-direction="graphite"] {
  --accent:      #ea580c;
  --accent-fg:   #ffffff;
  --accent-soft: #fff1e6;
  --accent-line: #ffd9bf;
  --bg:             #f7f7f6;
  --surface:        #ffffff;
  --surface-2:      #fafaf9;
  --surface-muted:  #f0f0ee;
  --line:           #e6e6e3;
  --line-strong:    #d1d1cd;
  --ink:            #1a1a18;
  --ink-2:          #3a3a37;
  --muted:          #71716c;
  --muted-2:        #a8a89f;
  --side-bg:        #1a1a18;
  --side-fg:        #e8e8e3;
  --side-muted:     #8a8a83;
  --side-active:    rgba(234, 88, 12, 0.14);
  --side-line:      rgba(255, 255, 255, 0.05);
  --bs-primary-rgb: 234, 88, 12;
  --font-display:   "Inter Tight", "Inter", sans-serif;
}

/* ── Densités ── */
[data-density="compact"] {
  --row-h: 36px; --pad-card: 14px; --pad-row: 8px 14px;
  --fs-2xs: 9px;  --fs-xs: 10px; --fs-sm: 11px; --fs-base: 12px; --fs-md: 13px;
  --fs-lg: 14px;  --fs-xl: 16px; --fs-2xl: 18px; --fs-3xl: 20px; --fs-4xl: 24px; --fs-5xl: 30px;
}
[data-density="comfortable"] {
  --row-h: 44px; --pad-card: 20px; --pad-row: 12px 18px;
  /* valeurs par défaut — pas d'override nécessaire */
}
[data-density="airy"] {
  --row-h: 56px; --pad-card: 28px; --pad-row: 18px 22px;
  --fs-2xs: 11px; --fs-xs: 12px; --fs-sm: 13px; --fs-base: 14px; --fs-md: 15px;
  --fs-lg: 17px;  --fs-xl: 19px; --fs-2xl: 22px; --fs-3xl: 26px; --fs-4xl: 32px; --fs-5xl: 40px;
}

/* ── Mode sombre ── */
[data-mode="dark"] {
  --bg:            #0c0e12;
  --surface:       #15181d;
  --surface-2:     #191c22;
  --surface-muted: #1f242b;
  --line:          #262a31;
  --line-strong:   #353a43;
  --ink:           #e8eaee;
  --ink-2:         #c1c5cc;
  --muted:         #808997;
  --muted-2:       #555d6b;

  /* Accent adapté au fond sombre */
  --accent:        #5b9bd5;
  --accent-fg:     #0c0e12;
  --accent-soft:   #0d1f35;
  --accent-line:   #1a3a5c;
  --bs-primary-rgb: 91, 155, 213;

  /* Sidebar */
  --side-bg:       #0a0c10;
  --side-fg:       #d8dce4;
  --side-muted:    #7a8290;
  --side-active:   rgba(91, 155, 213, 0.12);
  --side-line:     rgba(255, 255, 255, 0.05);

  /* Statuts en version sombre */
  --success-soft:  #052e1d;
  --warning-soft:  #2d1d05;
  --danger-soft:   #2d0808;
  --info-soft:     #0a1b3d;
  --violet-soft:   #1c0f3d;

  /* Ombres */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 1px 3px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.2);
  --shadow-3: 0 4px 12px rgba(0, 0, 0, 0.5), 0 12px 28px rgba(0, 0, 0, 0.3);

}