/* =========================================================
   KLÉNÉA DESIGN SYSTEM — TOKENS
   v0.2 — May 2026 (sidebar alignment tokens added)
   Force re-upload : 2026-05-03T21:30
   ========================================================= */

:root {
  /* ---- BRAND ANCHOR ---------------------------------------- */
  --k-brand-50:  #ecf5ef;
  --k-brand-100: #d3e8d9;
  --k-brand-200: #a7d1b3;
  --k-brand-300: #6fb185;
  --k-brand-400: #3e9159;
  --k-brand-500: #1c6434;  /* canonical Klénéa green */
  --k-brand-600: #185730;
  --k-brand-700: #14532d;
  --k-brand-800: #0f3f23;
  --k-brand-900: #0a2b18;

  /* primary alias — drives focus rings, primary buttons, selected nav */
  --k-primary:        var(--k-brand-500);
  --k-primary-hover:  var(--k-brand-600);
  --k-primary-active: var(--k-brand-700);
  --k-primary-soft:   var(--k-brand-50);
  --k-primary-soft-2: var(--k-brand-100);
  --k-primary-rgb:    28, 100, 52;

  /* ---- MODULE ACCENTS (subtle differentiation) ------------- */
  --k-mod-stock:  var(--k-brand-500);    /* same as brand */
  --k-mod-menu:   #b8722a;               /* warm amber */
  --k-mod-diet:   #2563a8;               /* clinical blue */
  --k-mod-vente:  #a04a3a;               /* terracotta */
  --k-mod-rh:     #6d4c8c;               /* muted violet */
  --k-mod-admin:  #475569;               /* slate */

  /* ---- NEUTRAL SCALE (cool, low-saturation) --------------- */
  --n-0:    #ffffff;
  --n-25:   #fafbfc;
  --n-50:   #f5f7fa;
  --n-75:   #eef2f6;
  --n-100:  #e5e9ef;
  --n-200:  #d2d8e0;
  --n-300:  #b4bcc7;
  --n-400:  #8c95a3;
  --n-500:  #6b7280;
  --n-600:  #4b5360;
  --n-700:  #353c47;
  --n-800:  #20262f;
  --n-900:  #111827;

  /* ---- SEMANTIC SURFACES ---------------------------------- */
  --bg:           var(--n-50);
  --bg-subtle:    var(--n-25);
  --surface:      var(--n-0);
  --surface-2:    var(--n-25);
  --sidebar-bg:   var(--n-75);

  --border:        var(--n-100);
  --border-soft:   var(--n-75);
  --border-strong: var(--n-200);
  --border-focus:  var(--k-primary);

  --text:    var(--n-900);
  --text-2:  var(--n-500);
  --text-3:  var(--n-400);
  --text-on-primary: var(--n-0);

  /* ---- SUCCESS (lighter green, distinct from brand) ------- */
  --ok-50:   #ecfdf5;
  --ok-100:  #d1fae5;
  --ok-500:  #10b981;
  --ok-700:  #047857;

  /* ---- WARNING (single hue, warm orange) ------------------ */
  --warn-50:  #fff8eb;
  --warn-100: #ffe7bf;
  --warn-200: #ffd089;
  --warn-500: #f59e0b;   /* canonical staging banner */
  --warn-700: #b45309;

  /* ---- DANGER (single hue, red) --------------------------- */
  --danger-50:  #fef2f2;
  --danger-100: #fee2e2;
  --danger-200: #fbcaca;
  --danger-500: #ef4444;
  --danger-700: #b91c1c;

  /* ---- INFO (cool blue, distinct from Diét accent) -------- */
  --info-50:  #eff6ff;
  --info-100: #dbeafe;
  --info-500: #3b82f6;
  --info-700: #1d4ed8;

  /* ---- TYPOGRAPHY ---------------------------------------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* type scale — 7 paliers */
  --fs-xs:   11px;   /* labels micro, badge text */
  --fs-sm:   12px;   /* table cells dense, captions */
  --fs-base: 14px;   /* body, table cells confort */
  --fs-md:   15px;   /* body emphasis, form inputs */
  --fs-lg:   17px;   /* card titles */
  --fs-xl:   20px;   /* page titles */
  --fs-2xl:  26px;   /* metric numbers, h1 */

  --lh-tight:   1.2;
  --lh-snug:    1.35;
  --lh-normal:  1.5;
  --lh-relaxed: 1.6;

  --fw-normal:   400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ---- SPACING (4-base) ---------------------------------- */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

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

  /* ---- SHADOWS (subtle, hospital-pro) -------------------- */
  --sh-xs:    0 1px 0 rgba(17, 24, 39, 0.04);
  --sh-sm:    0 1px 2px rgba(17, 24, 39, 0.06), 0 1px 1px rgba(17, 24, 39, 0.04);
  --sh-md:    0 4px 8px -2px rgba(17, 24, 39, 0.08), 0 2px 4px -2px rgba(17, 24, 39, 0.04);
  --sh-lg:    0 12px 20px -8px rgba(17, 24, 39, 0.12), 0 4px 8px -4px rgba(17, 24, 39, 0.06);
  --sh-modal: 0 24px 48px -16px rgba(17, 24, 39, 0.24), 0 8px 16px -8px rgba(17, 24, 39, 0.12);
  --sh-focus: 0 0 0 3px rgba(var(--k-primary-rgb), 0.18);

  /* ---- TRANSITIONS -------------------------------------- */
  --t-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-med:  200ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- Z-INDEX ------------------------------------------- */
  --z-sidebar: 20;
  --z-sticky:  30;
  --z-fab:     40;
  --z-modal:   50;
  --z-toast:   60;

  /* ---- DENSITY (auto via viewport, manual via [data-density]) */
  --row-h:    36px;
  --row-pad:  10px 12px;
  --ctrl-h:   36px;
  --tap-h:    44px;   /* tactile-first action targets */

  /* ---- SIDEBAR alignment (cohérent pour brand/sections/nav-items/footer) */
  --sidebar-pad-x:      var(--sp-4);  /* 16px — distance horizontale standard de tout contenu de la sidebar */
  --sidebar-sub-indent: var(--sp-8);  /* 32px — sub-items alignés sur le texte du parent (icône 18 + gap 12 + pad-x ≈ 32) */
}

/* Confort density (tablet, or forced) */
[data-density="comfort"], 
:root {
  /* default = compact below; comfort overrides */
}

@media (max-width: 1100px) {
  :root {
    --row-h:    44px;
    --row-pad:  12px 14px;
    --ctrl-h:   44px;
    --fs-base:  15px;
    --fs-sm:    13px;
  }
}

[data-density="comfort"] {
  --row-h:    44px;
  --row-pad:  12px 14px;
  --ctrl-h:   44px;
  --fs-base:  15px;
  --fs-sm:    13px;
}

[data-density="compact"] {
  --row-h:    32px;
  --row-pad:  6px 10px;
  --ctrl-h:   32px;
  --fs-base:  14px;
  --fs-sm:    12px;
}

/* ---- TYPE PAIRINGS (selectable via [data-typo]) ----------- */
[data-typo="system"] {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
[data-typo="inter"] {
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
[data-typo="plex"] {
  --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}