/**
 * MELODI ERP — Central Design Tokens
 * Structured hierarchy: Primitive -> Semantic -> Component tokens
 */

:root {
  /* ── 1. Primitives : Couleurs fondamentales ────────────────────────────── */
  --ds-primitive-blue-50:  #eff6ff;
  --ds-primitive-blue-100: #dbeafe;
  --ds-primitive-blue-200: #bfdbfe;
  --ds-primitive-blue-300: #93c5fd;
  --ds-primitive-blue-400: #60a5fa;
  --ds-primitive-blue-500: #3b82f6;
  --ds-primitive-blue-600: #2563eb;
  --ds-primitive-blue-700: #1d4ed8;
  --ds-primitive-blue-800: #1e40af;
  --ds-primitive-blue-900: #002a4e; /* Melodi Brand Dark */
  --ds-primitive-blue-950: #07192d;

  --ds-primitive-slate-50:  #f8fafc;
  --ds-primitive-slate-100: #f1f5f9;
  --ds-primitive-slate-200: #e2e8f0;
  --ds-primitive-slate-300: #cbd5e1;
  --ds-primitive-slate-400: #94a3b8;
  --ds-primitive-slate-500: #64748b;
  --ds-primitive-slate-600: #475569;
  --ds-primitive-slate-700: #334155;
  --ds-primitive-slate-800: #1e293b;
  --ds-primitive-slate-900: #0f172a;
  --ds-primitive-slate-950: #020617;

  --ds-primitive-emerald-500: #10b981;
  --ds-primitive-emerald-600: #059669;
  --ds-primitive-emerald-50:  #ecfdf5;

  --ds-primitive-amber-500:   #f59e0b;
  --ds-primitive-amber-600:   #d97706;
  --ds-primitive-amber-50:    #fffbeb;

  --ds-primitive-rose-500:    #f43f5e;
  --ds-primitive-rose-600:    #e11d48;
  --ds-primitive-rose-50:     #fff1f2;

  --ds-primitive-sky-500:     #0ea5e9;
  --ds-primitive-sky-600:     #0284c7;
  --ds-primitive-sky-50:      #f0f9ff;

  /* ── 2. Primitives : Échelle d'espacement ──────────────────────────────── */
  --ds-space-1:  0.25rem;  /* 4px */
  --ds-space-2:  0.5rem;   /* 8px */
  --ds-space-3:  0.75rem;  /* 12px */
  --ds-space-4:  1rem;     /* 16px */
  --ds-space-5:  1.25rem;  /* 20px */
  --ds-space-6:  1.5rem;   /* 24px */
  --ds-space-8:  2rem;     /* 32px */
  --ds-space-10: 2.5rem;   /* 40px */
  --ds-space-12: 3rem;     /* 48px */

  /* ── 3. Primitives : Typographie ───────────────────────────────────────── */
  --ds-font-sans: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ds-font-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  
  --ds-font-size-xs:   0.75rem;   /* 12px */
  --ds-font-size-sm:   0.875rem;  /* 14px */
  --ds-font-size-base: 1rem;      /* 16px */
  --ds-font-size-lg:   1.125rem;  /* 18px */
  --ds-font-size-xl:   1.25rem;   /* 20px */
  --ds-font-size-2xl:  1.5rem;    /* 24px */
  --ds-font-size-3xl:  1.875rem;  /* 30px */

  --ds-font-weight-regular:  400;
  --ds-font-weight-medium:   500;
  --ds-font-weight-semibold: 600;
  --ds-font-weight-bold:     700;

  /* ── 4. Primitives : Rayons de bordure (Border Radius) ─────────────────── */
  --ds-radius-xs:   2px;
  --ds-radius-sm:   4px;
  --ds-radius-md:   8px;
  --ds-radius-lg:   12px;
  --ds-radius-xl:   16px;
  --ds-radius-2xl:  24px;
  --ds-radius-full: 9999px;
  --ds-radius-pill: 9999px;

  /* ── 4b. Primitives : Hauteurs de ligne & Breakpoints & Z-Index ────────── */
  --ds-line-height-tight:   1.25;
  --ds-line-height-snug:    1.375;
  --ds-line-height-normal:  1.5;
  --ds-line-height-relaxed: 1.625;

  --ds-breakpoint-sm:  576px;
  --ds-breakpoint-md:  768px;
  --ds-breakpoint-lg:  992px;
  --ds-breakpoint-xl:  1200px;
  --ds-breakpoint-2xl: 1400px;

  --ds-z-dropdown: 1000;
  --ds-z-sticky:   1020;
  --ds-z-fixed:    1030;
  --ds-z-offcanvas: 1045;
  --ds-z-modal:    1055;
  --ds-z-popover:  1070;
  --ds-z-tooltip:  1080;
  --ds-z-toast:    1090;

  /* ── 5. Primitives : Ombres (Elevations) ───────────────────────────────── */
  --ds-shadow-xs:  0 1px 2px 0 rgba(15, 23, 42, 0.05);
  --ds-shadow-sm:  0 1px 3px 0 rgba(15, 23, 42, 0.07), 0 1px 2px -1px rgba(15, 23, 42, 0.06);
  --ds-shadow-md:  0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
  --ds-shadow-lg:  0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.04);
  --ds-shadow-xl:  0 20px 25px -5px rgba(15, 23, 42, 0.10), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
  --ds-shadow-2xl: 0 25px 50px -12px rgba(15, 23, 42, 0.22);
  --ds-shadow-inner: inset 0 2px 4px 0 rgba(15, 23, 42, 0.05);

  /* ── 6. Primitives : Transitions ───────────────────────────────────────── */
  --ds-transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --ds-transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --ds-transition-slow:   350ms cubic-bezier(0.4, 0, 0.2, 1);
  --ds-transition-spring: 300ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ── 7. Tokens Sémantiques (Défaut : Mode MELODI Standard) ─────────────── */
  --ds-color-primary:        var(--ds-primitive-blue-900);
  --ds-color-primary-hover:  var(--ds-primitive-blue-800);
  --ds-color-primary-active: var(--ds-primitive-blue-950);
  --ds-color-primary-subtle: var(--ds-primitive-blue-50);
  --ds-color-primary-text:   #ffffff;

  --ds-color-accent:         var(--ds-primitive-blue-500);
  --ds-color-accent-hover:   var(--ds-primitive-blue-600);
  --ds-color-accent-subtle:  var(--ds-primitive-blue-50);

  --ds-color-bg:             var(--ds-primitive-slate-100);
  --ds-color-surface:        #ffffff;
  --ds-color-surface-subtle: var(--ds-primitive-slate-50);
  --ds-color-surface-hover:  var(--ds-primitive-slate-100);
  --ds-color-surface-active: var(--ds-primitive-slate-200);

  --ds-color-text:           var(--ds-primitive-slate-900);
  --ds-color-text-muted:     var(--ds-primitive-slate-500);
  --ds-color-text-subtle:    var(--ds-primitive-slate-400);
  --ds-color-text-inverse:   #ffffff;

  --ds-color-border:         var(--ds-primitive-slate-200);
  --ds-color-border-subtle:  var(--ds-primitive-slate-100);
  --ds-color-border-strong:  var(--ds-primitive-slate-300);

  --ds-color-focus-ring:     rgba(59, 130, 246, 0.28);

  /* Statuts */
  --ds-color-success:        var(--ds-primitive-emerald-600);
  --ds-color-success-bg:     var(--ds-primitive-emerald-50);
  --ds-color-success-subtle: var(--ds-primitive-emerald-50);
  --ds-color-success-border: #a7f3d0;

  --ds-color-warning:        var(--ds-primitive-amber-600);
  --ds-color-warning-bg:     var(--ds-primitive-amber-50);
  --ds-color-warning-subtle: var(--ds-primitive-amber-50);
  --ds-color-warning-border: #fde68a;

  --ds-color-danger:         var(--ds-primitive-rose-600);
  --ds-color-danger-bg:      var(--ds-primitive-rose-50);
  --ds-color-danger-subtle:  var(--ds-primitive-rose-50);
  --ds-color-danger-border:  #fecdd3;

  --ds-color-info:           var(--ds-primitive-sky-600);
  --ds-color-info-bg:        var(--ds-primitive-sky-50);
  --ds-color-info-subtle:    var(--ds-primitive-sky-50);
  --ds-color-info-border:    #bae6fd;

  /* ── 8. Tokens de Composants Spécifiques ───────────────────────────────── */
  --ds-btn-height-sm: 32px;
  --ds-btn-height-md: 40px;
  --ds-btn-height-lg: 48px;
  --ds-btn-radius:    var(--ds-radius-md);

  --ds-card-radius:   var(--ds-radius-lg);
  --ds-card-shadow:   var(--ds-shadow-sm);
  --ds-card-shadow-hover: var(--ds-shadow-md);
  --ds-card-border:   1px solid var(--ds-color-border);

  --ds-table-header-bg: var(--ds-color-surface-subtle);
  --ds-table-row-hover: var(--ds-color-surface-hover);

  --ds-input-height-sm: 32px;
  --ds-input-height:    40px;
  --ds-input-height-lg: 48px;
  --ds-input-radius:    var(--ds-radius-md);
  --ds-input-border:    var(--ds-color-border);
}

/* ── 9. Support Natif du Thème Sombre (Dark Mode) dans Tokens ────────────── */
[data-theme="dark"],
[data-theme="nigth"],
[data-theme="night"] {
  --ds-color-primary:        #3b82f6;
  --ds-color-primary-hover:  #60a5fa;
  --ds-color-primary-active: #2563eb;
  --ds-color-primary-subtle: rgba(59, 130, 246, 0.15);
  --ds-color-primary-text:   #ffffff;

  --ds-color-accent:         #60a5fa;
  --ds-color-accent-hover:   #93c5fd;
  --ds-color-accent-subtle:  rgba(96, 165, 250, 0.15);

  --ds-color-bg:             #0b0f19;
  --ds-color-surface:        #151c2e;
  --ds-color-surface-subtle: #1e293b;
  --ds-color-surface-hover:  #24334a;
  --ds-color-surface-active: #2d3f5b;

  --ds-color-text:           #f8fafc;
  --ds-color-text-muted:     #94a3b8;
  --ds-color-text-subtle:    #64748b;
  --ds-color-text-inverse:   #0f172a;

  --ds-color-border:         #2d3b55;
  --ds-color-border-subtle:  #1e293b;
  --ds-color-border-strong:  #3e4f6f;

  --ds-color-focus-ring:     rgba(96, 165, 250, 0.35);

  --ds-color-success:        #34d399;
  --ds-color-success-bg:     rgba(16, 185, 129, 0.15);
  --ds-color-success-subtle: rgba(16, 185, 129, 0.15);
  --ds-color-success-border: rgba(52, 211, 153, 0.3);

  --ds-color-warning:        #fbbf24;
  --ds-color-warning-bg:     rgba(245, 158, 11, 0.15);
  --ds-color-warning-subtle: rgba(245, 158, 11, 0.15);
  --ds-color-warning-border: rgba(251, 191, 36, 0.3);

  --ds-color-danger:         #fb7185;
  --ds-color-danger-bg:      rgba(244, 63, 94, 0.15);
  --ds-color-danger-subtle:  rgba(244, 63, 94, 0.15);
  --ds-color-danger-border:  rgba(251, 113, 133, 0.3);

  --ds-color-info:           #38bdf8;
  --ds-color-info-bg:        rgba(14, 165, 233, 0.15);
  --ds-color-info-subtle:    rgba(14, 165, 233, 0.15);
  --ds-color-info-border:    rgba(56, 189, 248, 0.3);

  --ds-shadow-xs:  0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --ds-shadow-sm:  0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.3);
  --ds-shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.45), 0 2px 4px -2px rgba(0, 0, 0, 0.35);
  --ds-shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
  --ds-shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.55), 0 8px 10px -6px rgba(0, 0, 0, 0.45);
  --ds-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
}

/* ── 10. Support du Thème Clair (Light Mode) dans Tokens ─────────────────── */
[data-theme="light"] {
  --ds-color-primary:        #1d4ed8;
  --ds-color-primary-hover:  #1e40af;
  --ds-color-primary-active: #172554;
  --ds-color-primary-subtle: #eff6ff;
  --ds-color-primary-text:   #ffffff;

  --ds-color-accent:         #3b82f6;
  --ds-color-accent-hover:   #2563eb;

  --ds-color-bg:             #f8fafc;
  --ds-color-surface:        #ffffff;
  --ds-color-surface-subtle: #f1f5f9;
  --ds-color-surface-hover:  #e2e8f0;
}