/* ═══════════════════════════════════════════
   Design Tokens - ERP PRO
   Single source of truth for all visual values.
   Primary color overridden at runtime via <style> injected from DB.
   ═══════════════════════════════════════════ */

:root {
  /* ── Primary (white-label: injected from settings) ── */
  --color-primary:       #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-primary-active:#1e40af;
  --color-primary-fg:    #ffffff;
  --color-primary-bg:    #eff6ff;
  --color-primary-ring:  rgba(37,99,235,.18);
  --color-primary-muted: #93c5fd;

  /* ── Surfaces ── */
  --color-bg:              #f1f5f9;
  --color-surface:         #ffffff;
  --color-surface-raised:  #f8fafc;
  --color-surface-overlay: rgba(255,255,255,.96);

  /* ── Borders ── */
  --color-border:       #e2e8f0;
  --color-border-strong:#cbd5e1;

  /* ── Text ── */
  --color-text:          #0f172a;
  --color-text-secondary:#475569;
  --color-text-muted:    #94a3b8;
  --color-text-disabled: #cbd5e1;
  --color-text-inverse:  #ffffff;

  /* ── Semantic ── */
  --color-success:        #16a34a;
  --color-success-bg:     #f0fdf4;
  --color-success-fg:     #15803d;
  --color-success-border: #bbf7d0;

  --color-warning:        #d97706;
  --color-warning-bg:     #fffbeb;
  --color-warning-fg:     #b45309;
  --color-warning-border: #fde68a;

  --color-danger:         #dc2626;
  --color-danger-hover:   #b91c1c;
  --color-danger-bg:      #fef2f2;
  --color-danger-fg:      #b91c1c;
  --color-danger-border:  #fecaca;
  --color-danger-ring:    rgba(220,38,38,.18);

  --color-info:           #0284c7;
  --color-info-bg:        #f0f9ff;
  --color-info-fg:        #0369a1;
  --color-info-border:    #bae6fd;

  /* ── Sidebar (always dark regardless of theme) ── */
  --sidebar-bg:            #0f172a;
  --sidebar-border:        #1e293b;
  --sidebar-text:          #94a3b8;
  --sidebar-text-active:   #f1f5f9;
  --sidebar-text-hover:    #cbd5e1;
  --sidebar-item-hover:    rgba(255,255,255,.06);
  --sidebar-item-active:   rgba(37,99,235,.2);
  --sidebar-item-accent:   #2563eb;
  --sidebar-width:         240px;
  --sidebar-collapsed:     56px;

  /* ── Input sizes ── */
  --input-h:    36px;
  --input-h-sm: 30px;
  --input-h-lg: 42px;

  /* ── Spacing (4px grid) ── */
  --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;

  /* ── Radius ── */
  --r-sm:   4px;
  --r-md:   6px;
  --r-lg:   8px;
  --r-xl:   12px;
  --r-full: 9999px;

  /* ── Shadows ── */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.05);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,.10), 0 2px 4px -2px rgba(0,0,0,.10);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.10), 0 4px 6px -4px rgba(0,0,0,.10);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,.10), 0 8px 10px -6px rgba(0,0,0,.10);

  /* ── Typography ── */
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  --text-xs:  11px;  --text-sm: 13px;  --text-base: 14px;
  --text-md:  15px;  --text-lg: 16px;  --text-xl:   18px;
  --text-2xl: 22px;  --text-3xl:28px;

  --leading-tight:  1.25;
  --leading-snug:   1.375;
  --leading-normal: 1.5;

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

  /* ── Motion ── */
  --ease-out:    cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.4,0,.2,1);
  --dur-fast:  100ms;
  --dur-base:  150ms;
  --dur-slow:  250ms;

  /* ── Z-index scale ── */
  --z-dropdown: 100;
  --z-sticky:   110;
  --z-backdrop: 200;
  --z-modal:    210;
  --z-toast:    300;
}

/* ── Dark mode ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg:              #0f172a;
    --color-surface:         #141e38;
    --color-surface-raised:  #243044;
    --color-surface-overlay: rgba(15,23,42,.97);
    --color-border:          #334155;
    --color-border-strong:   #475569;
    --color-text:            #f1f5f9;
    --color-text-secondary:  #94a3b8;
    --color-text-muted:      #64748b;
    --color-text-disabled:   #334155;
    --color-primary-bg:      rgba(37,99,235,.15);
    --color-primary-ring:    rgba(37,99,235,.28);
    --shadow-xs: 0 1px 2px rgba(0,0,0,.3);
    --shadow-sm: 0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,.4), 0 2px 4px -2px rgba(0,0,0,.3);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.4), 0 4px 6px -4px rgba(0,0,0,.3);
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --sidebar-bg:          #ffffff;
  --sidebar-border:      #e2e8f0;
  --sidebar-text:        #64748b;
  --sidebar-text-active: #0f172a;
  --sidebar-text-hover:  #334155;
  --sidebar-item-hover:  rgba(0,0,0,.04);
  --sidebar-item-active: rgba(37,99,235,.08);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg:              #0f172a;
  --color-surface:         #1e293b;
  --color-surface-raised:  #243044;
  --color-surface-overlay: rgba(15,23,42,.97);
  --color-border:          #334155;
  --color-border-strong:   #475569;
  --color-text:            #f1f5f9;
  --color-text-secondary:  #94a3b8;
  --color-text-muted:      #64748b;
  --color-text-disabled:   #334155;
  --color-primary-bg:      rgba(37,99,235,.15);
  --color-primary-ring:    rgba(37,99,235,.28);
  --shadow-xs: 0 1px 2px rgba(0,0,0,.3);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,.4), 0 2px 4px -2px rgba(0,0,0,.3);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.4), 0 4px 6px -4px rgba(0,0,0,.3);
}