/* =============================================================================
   ARTISCODE ERP — DESIGN TOKENS
   Source unique de vérité : couleurs, espacements, rayons, ombres, mouvement.
   Aucune valeur brute ne doit apparaître ailleurs que dans ce fichier.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---------------------------------------------------------------------
     1. PRIMITIVES — la palette brute, jamais utilisée directement en UI
     --------------------------------------------------------------------- */

  /* Orange de marque */
  --c-brand-50:  #fff4ec;
  --c-brand-100: #ffe4d1;
  --c-brand-200: #ffc5a3;
  --c-brand-300: #ff9f6b;
  --c-brand-400: #ff8038;
  --c-brand-500: #ff6801;   /* couleur officielle Artiscode */
  --c-brand-600: #e25400;
  --c-brand-700: #b84200;
  --c-brand-800: #8f3403;
  --c-brand-900: #6b2806;

  /* Navy de marque */
  --c-navy-50:  #f2f6fb;
  --c-navy-100: #e3ebf5;
  --c-navy-200: #c5d5e8;
  --c-navy-300: #94b0d0;
  --c-navy-400: #5c81ab;
  --c-navy-500: #33587f;
  --c-navy-600: #1e3f61;
  --c-navy-700: #14304c;
  --c-navy-800: #0b2038;
  --c-navy-900: #011329;   /* couleur officielle Artiscode */
  --c-navy-950: #000a17;

  /* Gris neutres, légèrement teintés navy pour l'harmonie */
  --c-slate-0:   #ffffff;
  --c-slate-25:  #fbfcfe;
  --c-slate-50:  #f6f8fb;
  --c-slate-100: #eef2f7;
  --c-slate-200: #e2e8f0;
  --c-slate-300: #cbd5e1;
  --c-slate-400: #94a3b8;
  --c-slate-500: #64748b;
  --c-slate-600: #475569;
  --c-slate-700: #334155;
  --c-slate-800: #1e293b;
  --c-slate-900: #0f172a;
  --c-slate-950: #060b16;

  /* Sémantiques brutes */
  --c-green-50:  #ecfdf3;  --c-green-400: #34d399;  --c-green-500: #10b981;  --c-green-600: #059669;  --c-green-700: #047857;
  --c-amber-50:  #fffaeb;  --c-amber-400: #fbbf24;  --c-amber-500: #f59e0b;  --c-amber-600: #d97706;  --c-amber-700: #b45309;
  --c-red-50:    #fef3f2;  --c-red-400:   #f87171;  --c-red-500:   #ef4444;  --c-red-600:   #dc2626;  --c-red-700:   #b91c1c;
  --c-blue-50:   #eff8ff;  --c-blue-400:  #60a5fa;  --c-blue-500:  #3b82f6;  --c-blue-600:  #2563eb;  --c-blue-700:  #1d4ed8;
  --c-violet-500: #8b5cf6; --c-violet-600: #7c3aed;
  --c-teal-500:   #14b8a6; --c-cyan-500:   #06b6d4;
  --c-pink-500:   #ec4899;

  /* ---------------------------------------------------------------------
     2. TOKENS SÉMANTIQUES — ce que l'UI consomme réellement
     --------------------------------------------------------------------- */

  /* Fonds */
  --bg-canvas:      #eef2f8;   /* fond de page, derrière les surfaces */
  --bg-surface:     #ffffff;   /* cartes, panneaux */
  --bg-surface-2:   var(--c-slate-50);
  --bg-surface-3:   var(--c-slate-100);
  --bg-inset:       var(--c-slate-50);
  --bg-hover:       rgba(1, 19, 41, 0.04);
  --bg-active:      rgba(1, 19, 41, 0.07);

  /* Verre — le chrome de l'application */
  --glass-bg:        rgba(255, 255, 255, 0.72);
  --glass-bg-strong: rgba(255, 255, 255, 0.86);
  --glass-border:    rgba(255, 255, 255, 0.65);
  --glass-blur:      18px;
  --glass-saturate:  180%;

  /* Sidebar — toujours sombre, dans les deux thèmes */
  --sidebar-bg:        linear-gradient(168deg, #04223f 0%, #011329 52%, #010d1d 100%);
  --sidebar-fg:        rgba(232, 240, 250, 0.72);
  --sidebar-fg-strong: #ffffff;
  --sidebar-border:    rgba(255, 255, 255, 0.07);
  --sidebar-hover:     rgba(255, 255, 255, 0.06);
  --sidebar-active:    rgba(255, 104, 1, 0.14);
  --sidebar-section:   rgba(148, 176, 208, 0.55);

  /* Texte */
  --fg-strong:  var(--c-navy-900);
  --fg:         #16263a;
  --fg-muted:   var(--c-slate-500);
  --fg-subtle:  var(--c-slate-400);
  --fg-onbrand: #ffffff;
  --fg-ondark:  #ffffff;

  /* Bordures */
  --border:        rgba(1, 19, 41, 0.09);
  --border-strong: rgba(1, 19, 41, 0.16);
  --border-subtle: rgba(1, 19, 41, 0.055);

  /* Marque */
  --brand:          var(--c-brand-500);
  --brand-hover:    var(--c-brand-600);
  --brand-active:   var(--c-brand-700);
  --brand-soft:     var(--c-brand-50);
  --brand-soft-fg:  var(--c-brand-700);
  --brand-ring:     rgba(255, 104, 1, 0.28);

  --accent:         var(--c-navy-900);
  --accent-hover:   var(--c-navy-800);
  --accent-soft:    var(--c-navy-50);
  --accent-soft-fg: var(--c-navy-700);

  /* États */
  --success: var(--c-green-600);  --success-soft: var(--c-green-50);  --success-fg: var(--c-green-700);
  --warning: var(--c-amber-600);  --warning-soft: var(--c-amber-50);  --warning-fg: var(--c-amber-700);
  --danger:  var(--c-red-600);    --danger-soft:  var(--c-red-50);    --danger-fg:  var(--c-red-700);
  --info:    var(--c-blue-600);   --info-soft:    var(--c-blue-50);   --info-fg:    var(--c-blue-700);

  /* Séries de graphiques — teintes distinctes et harmonieuses */
  --chart-1: #ff6801;
  --chart-2: #1e3f61;
  --chart-3: #14b8a6;
  --chart-4: #8b5cf6;
  --chart-5: #f59e0b;
  --chart-6: #3b82f6;
  --chart-7: #ec4899;
  --chart-8: #10b981;
  --chart-grid: rgba(1, 19, 41, 0.07);
  --chart-label: var(--c-slate-500);

  /* Dégradés signature */
  --gradient-brand:  linear-gradient(135deg, #ff8038 0%, #ff6801 45%, #e25400 100%);
  --gradient-navy:   linear-gradient(135deg, #14304c 0%, #011329 100%);
  --gradient-hero:   linear-gradient(120deg, #011329 0%, #0d2b4a 42%, #1a3f63 70%, #b84200 140%);
  --gradient-sheen:  linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.42) 50%, transparent 70%);
  --gradient-mesh-1: radial-gradient(circle at 20% 18%, rgba(255, 104, 1, 0.16), transparent 55%);
  --gradient-mesh-2: radial-gradient(circle at 82% 8%, rgba(59, 130, 246, 0.14), transparent 50%);
  --gradient-mesh-3: radial-gradient(circle at 62% 92%, rgba(139, 92, 246, 0.10), transparent 52%);

  /* Ombres — teintées navy plutôt que noires */
  --shadow-xs:  0 1px 2px rgba(1, 19, 41, 0.05);
  --shadow-sm:  0 1px 3px rgba(1, 19, 41, 0.07), 0 1px 2px rgba(1, 19, 41, 0.04);
  --shadow-md:  0 4px 12px rgba(1, 19, 41, 0.07), 0 2px 4px rgba(1, 19, 41, 0.04);
  --shadow-lg:  0 12px 28px rgba(1, 19, 41, 0.10), 0 4px 10px rgba(1, 19, 41, 0.05);
  --shadow-xl:  0 24px 48px rgba(1, 19, 41, 0.14), 0 8px 18px rgba(1, 19, 41, 0.06);
  --shadow-2xl: 0 40px 80px rgba(1, 19, 41, 0.20), 0 12px 28px rgba(1, 19, 41, 0.08);
  --shadow-brand: 0 10px 24px rgba(255, 104, 1, 0.30);
  --shadow-inner: inset 0 1px 0 rgba(255, 255, 255, 0.55);

  /* ---------------------------------------------------------------------
     3. ÉCHELLES
     --------------------------------------------------------------------- */

  --font-sans:    'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Plus Jakarta Sans', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', 'Cascadia Mono', 'JetBrains Mono', Consolas, monospace;

  --text-2xs: 0.6875rem;  /* 11 */
  --text-xs:  0.75rem;    /* 12 */
  --text-sm:  0.8125rem;  /* 13 */
  --text-md:  0.875rem;   /* 14 — taille de base de l'interface */
  --text-lg:  1rem;       /* 16 */
  --text-xl:  1.125rem;   /* 18 */
  --text-2xl: 1.375rem;   /* 22 */
  --text-3xl: 1.75rem;    /* 28 */
  --text-4xl: 2.25rem;    /* 36 */
  --text-5xl: 3rem;       /* 48 */

  --leading-tight: 1.2;
  --leading-snug:  1.35;
  --leading-base:  1.55;
  --leading-loose: 1.7;

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-wide:  0.04em;
  --tracking-caps:  0.09em;

  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-7:  1.75rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  --radius-xs:   6px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-full: 999px;

  /* Mouvement */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-instant: 90ms;
  --dur-fast:    160ms;
  --dur-base:    240ms;
  --dur-slow:    380ms;
  --dur-slower:  620ms;

  /* Structure */
  --sidebar-w:           268px;
  --sidebar-w-collapsed: 78px;
  --topbar-h:            68px;
  --content-max:         1560px;
  --page-gutter:         clamp(1rem, 2.2vw, 2rem);

  /* Empilement */
  --z-base:     0;
  --z-sticky:   100;
  --z-sidebar:  200;
  --z-topbar:   300;
  --z-dropdown: 400;
  --z-overlay:  500;
  --z-modal:    600;
  --z-toast:    700;
  --z-tooltip:  800;
}

/* =============================================================================
   THÈME SOMBRE
   ========================================================================== */

:root[data-theme='dark'] {
  color-scheme: dark;

  --bg-canvas:    #060d18;
  --bg-surface:   #0d1826;
  --bg-surface-2: #121f30;
  --bg-surface-3: #182a3e;
  --bg-inset:     #0a141f;
  --bg-hover:     rgba(255, 255, 255, 0.045);
  --bg-active:    rgba(255, 255, 255, 0.08);

  --glass-bg:        rgba(13, 24, 38, 0.72);
  --glass-bg-strong: rgba(13, 24, 38, 0.9);
  --glass-border:    rgba(255, 255, 255, 0.08);

  --sidebar-bg:      linear-gradient(168deg, #0b1726 0%, #060d18 55%, #04090f 100%);
  --sidebar-fg:      rgba(206, 222, 240, 0.66);
  --sidebar-border:  rgba(255, 255, 255, 0.06);
  --sidebar-hover:   rgba(255, 255, 255, 0.05);
  --sidebar-active:  rgba(255, 104, 1, 0.16);
  --sidebar-section: rgba(148, 176, 208, 0.42);

  --fg-strong: #f1f6fc;
  --fg:        #dae4f0;
  --fg-muted:  #8fa3bc;
  --fg-subtle: #64798f;

  --border:        rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.17);
  --border-subtle: rgba(255, 255, 255, 0.055);

  --brand-soft:     rgba(255, 104, 1, 0.14);
  --brand-soft-fg:  #ff9f6b;
  --accent-soft:    rgba(148, 176, 208, 0.12);
  --accent-soft-fg: #c5d5e8;

  --success: var(--c-green-400);  --success-soft: rgba(16, 185, 129, 0.14);  --success-fg: #6ee7b7;
  --warning: var(--c-amber-400);  --warning-soft: rgba(245, 158, 11, 0.14);  --warning-fg: #fcd34d;
  --danger:  var(--c-red-400);    --danger-soft:  rgba(239, 68, 68, 0.14);   --danger-fg:  #fca5a5;
  --info:    var(--c-blue-400);   --info-soft:    rgba(59, 130, 246, 0.14);  --info-fg:    #93c5fd;

  --chart-2: #60a5fa;
  --chart-grid:  rgba(255, 255, 255, 0.07);
  --chart-label: #8fa3bc;

  --gradient-navy:   linear-gradient(135deg, #182a3e 0%, #0a141f 100%);
  --gradient-hero:   linear-gradient(120deg, #060d18 0%, #0d2138 45%, #16344f 72%, #8f3403 145%);
  --gradient-sheen:  linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.10) 50%, transparent 70%);
  --gradient-mesh-1: radial-gradient(circle at 20% 18%, rgba(255, 104, 1, 0.16), transparent 55%);
  --gradient-mesh-2: radial-gradient(circle at 82% 8%, rgba(59, 130, 246, 0.13), transparent 50%);
  --gradient-mesh-3: radial-gradient(circle at 62% 92%, rgba(139, 92, 246, 0.12), transparent 52%);

  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-lg:  0 12px 28px rgba(0, 0, 0, 0.5), 0 4px 10px rgba(0, 0, 0, 0.32);
  --shadow-xl:  0 24px 48px rgba(0, 0, 0, 0.55), 0 8px 18px rgba(0, 0, 0, 0.35);
  --shadow-2xl: 0 40px 80px rgba(0, 0, 0, 0.62), 0 12px 28px rgba(0, 0, 0, 0.4);
  --shadow-brand: 0 10px 24px rgba(255, 104, 1, 0.34);
  --shadow-inner: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Densité compacte — pilotée par data-density sur <html> */
:root[data-density='compact'] {
  --text-md: 0.8125rem;
  --space-4: 0.75rem;
  --space-5: 1rem;
  --space-6: 1.15rem;
  --topbar-h: 60px;
}