/* ============================================================
   DESIGN TOKENS — 3-Layer System
   Layer 1: Primitives (raw values)
   Layer 2: Semantic (purpose-based aliases)
   Layer 3: Components (component-specific)
============================================================ */

/* ============================================================
   LAYER 1 — PRIMITIVES
============================================================ */
:root {
  /* Slate (neutral) */
  --p-slate-50:  #F8FAFC;
  --p-slate-100: #F1F5F9;
  --p-slate-200: #E2E8F0;
  --p-slate-300: #CBD5E1;
  --p-slate-400: #94A3B8;
  --p-slate-500: #64748B;
  --p-slate-600: #475569;
  --p-slate-700: #334155;
  --p-slate-800: #1E293B;
  --p-slate-900: #0F172A;
  --p-slate-950: #020617;

  /* Indigo (primary) */
  --p-indigo-50:  #EEF2FF;
  --p-indigo-100: #E0E7FF;
  --p-indigo-200: #C7D2FE;
  --p-indigo-300: #A5B4FC;
  --p-indigo-400: #818CF8;
  --p-indigo-500: #6366F1;
  --p-indigo-600: #4F46E5;
  --p-indigo-700: #4338CA;
  --p-indigo-800: #3730A3;
  --p-indigo-900: #312E81;

  /* Violet (AI accent) */
  --p-violet-50:  #F5F3FF;
  --p-violet-100: #EDE9FE;
  --p-violet-200: #DDD6FE;
  --p-violet-300: #C4B5FD;
  --p-violet-400: #A78BFA;
  --p-violet-500: #8B5CF6;
  --p-violet-600: #7C3AED;
  --p-violet-700: #6D28D9;

  /* Pink (gradient tail) */
  --p-pink-400: #F472B6;
  --p-pink-500: #EC4899;

  /* Status */
  --p-emerald-50:  #ECFDF5;
  --p-emerald-100: #D1FAE5;
  --p-emerald-500: #10B981;
  --p-emerald-600: #059669;
  --p-emerald-700: #047857;

  --p-amber-50:  #FFFBEB;
  --p-amber-100: #FEF3C7;
  --p-amber-500: #F59E0B;
  --p-amber-600: #D97706;

  --p-red-50:    #FEF2F2;
  --p-red-100:   #FEE2E2;
  --p-red-500:   #EF4444;
  --p-red-600:   #DC2626;

  --p-blue-50:   #EFF6FF;
  --p-blue-100:  #DBEAFE;
  --p-blue-500:  #3B82F6;
  --p-blue-600:  #2563EB;

  --p-white: #FFFFFF;

  /* Spacing — 4px base */
  --sp-0:   0;
  --sp-1:   0.25rem;
  --sp-2:   0.5rem;
  --sp-3:   0.75rem;
  --sp-4:   1rem;
  --sp-5:   1.25rem;
  --sp-6:   1.5rem;
  --sp-8:   2rem;
  --sp-10:  2.5rem;
  --sp-12:  3rem;
  --sp-16:  4rem;
  --sp-20:  5rem;
  --sp-24:  6rem;

  /* Typography */
  --fs-xs:    0.75rem;
  --fs-sm:    0.8125rem;
  --fs-base:  0.875rem;
  --fs-md:    0.9375rem;
  --fs-lg:    1rem;
  --fs-xl:    1.125rem;
  --fs-2xl:   1.25rem;
  --fs-3xl:   1.5rem;
  --fs-4xl:   1.875rem;
  --fs-5xl:   2.25rem;

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

  --lh-tight:   1.25;
  --lh-snug:    1.375;
  --lh-normal:  1.5;
  --lh-relaxed: 1.625;

  --ls-tight:   -0.02em;
  --ls-normal:   0;
  --ls-wide:     0.025em;
  --ls-widest:   0.1em;

  /* Radius */
  --r-sm:   0.25rem;
  --r-md:   0.375rem;
  --r-lg:   0.5rem;
  --r-xl:   0.75rem;
  --r-2xl:  1rem;
  --r-full: 9999px;

  /* Shadows */
  --sh-xs:  0 1px 2px rgb(15 23 42 / 0.04);
  --sh-sm:  0 1px 3px rgb(15 23 42 / 0.06), 0 1px 2px rgb(15 23 42 / 0.04);
  --sh-md:  0 4px 8px -2px rgb(15 23 42 / 0.08), 0 2px 4px -1px rgb(15 23 42 / 0.04);
  --sh-lg:  0 12px 24px -6px rgb(15 23 42 / 0.10), 0 4px 8px -2px rgb(15 23 42 / 0.05);
  --sh-xl:  0 24px 48px -12px rgb(15 23 42 / 0.18);
  --sh-ring-primary: 0 0 0 3px rgb(99 102 241 / 0.20);
  --sh-ring-error:   0 0 0 3px rgb(239 68 68 / 0.20);

  /* Motion */
  --d-fast:   120ms;
  --d-normal: 180ms;
  --d-slow:   280ms;
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);

  /* Z-index */
  --z-base:     1;
  --z-sticky:   100;
  --z-overlay:  200;
  --z-modal:    300;
  --z-toast:    400;
}

/* ============================================================
   LAYER 2 — SEMANTIC
============================================================ */
:root {
  /* Backgrounds */
  --color-bg-app:      var(--p-slate-50);
  --color-bg-sidebar:  var(--p-slate-900);
  --color-bg-surface:  var(--p-white);
  --color-bg-elevated: var(--p-white);
  --color-bg-muted:    var(--p-slate-100);
  --color-bg-hover:    var(--p-slate-100);

  /* Foregrounds */
  --color-fg:          var(--p-slate-900);
  --color-fg-muted:    var(--p-slate-500);
  --color-fg-subtle:   var(--p-slate-400);
  --color-fg-inverse:  var(--p-white);

  /* Brand */
  --color-primary:        var(--p-indigo-600);
  --color-primary-hover:  var(--p-indigo-700);
  --color-primary-light:  var(--p-indigo-50);
  --color-primary-fg:     var(--p-white);

  --color-accent:         var(--p-violet-500);
  --color-accent-hover:   var(--p-violet-600);
  --color-accent-light:   var(--p-violet-50);

  /* AI gradient */
  --gradient-ai: linear-gradient(135deg, var(--p-indigo-500) 0%, var(--p-violet-500) 50%, var(--p-pink-500) 100%);
  --gradient-ai-soft: linear-gradient(135deg, var(--p-indigo-50) 0%, var(--p-violet-50) 100%);

  /* Borders */
  --color-border:        var(--p-slate-200);
  --color-border-strong: var(--p-slate-300);
  --color-border-focus:  var(--p-indigo-500);

  /* Status */
  --color-success:       var(--p-emerald-500);
  --color-success-bg:    var(--p-emerald-50);
  --color-success-fg:    var(--p-emerald-700);
  --color-warning:       var(--p-amber-500);
  --color-warning-bg:    var(--p-amber-50);
  --color-warning-fg:    var(--p-amber-600);
  --color-error:         var(--p-red-500);
  --color-error-bg:      var(--p-red-50);
  --color-error-fg:      var(--p-red-600);
  --color-info:          var(--p-blue-500);
  --color-info-bg:       var(--p-blue-50);
  --color-info-fg:       var(--p-blue-600);

  /* Sidebar specific */
  --sidebar-fg:        var(--p-slate-300);
  --sidebar-fg-active: var(--p-white);
  --sidebar-bg-active: rgb(255 255 255 / 0.08);
  --sidebar-bg-hover:  rgb(255 255 255 / 0.04);
  --sidebar-border:    rgb(255 255 255 / 0.08);

  /* Typography */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
}

/* ============================================================
   LAYER 3 — COMPONENTS
============================================================ */
:root {
  /* Sidebar */
  --sidebar-w:      256px;
  --sidebar-w-min:  72px;

  /* Topbar */
  --topbar-h:       64px;

  /* Button */
  --btn-h-sm:       32px;
  --btn-h-md:       38px;
  --btn-h-lg:       44px;
  --btn-radius:     var(--r-lg);
  --btn-fw:         var(--fw-semibold);

  /* Input */
  --input-h:        38px;
  --input-radius:   var(--r-lg);
  --input-border:   var(--color-border);
  --input-bg:       var(--color-bg-surface);

  /* Card */
  --card-bg:        var(--color-bg-surface);
  --card-border:    var(--color-border);
  --card-radius:    var(--r-xl);
  --card-shadow:    var(--sh-sm);
  --card-p:         var(--sp-6);

  /* Table */
  --table-row-h:    52px;
  --table-row-hover-bg: var(--p-slate-50);
  --table-border:   var(--color-border);

  /* Badge */
  --badge-h:        22px;
  --badge-radius:   var(--r-full);
  --badge-px:       var(--sp-2);

  /* Avatar */
  --avatar-sm:      28px;
  --avatar-md:      36px;
  --avatar-lg:      44px;
}