/* ============================================================
   DESIGN TOKENS — Single source of truth
   All values reference these variables throughout the app.
   To retheme: change only this block.
   ============================================================ */
:root {
  /* Brand - Blue palette */
  --brand-50:  #eff6ff;
  --brand-100: #dbeafe;
  --brand-200: #bfdbfe;
  --brand-400: #60a5fa;
  --brand-500: #3b82f6;
  --brand-600: #2563eb;
  --brand-700: #1d4ed8;
  --brand-900: #1e3a8a;

  /* Neutrals - Gray palette */
  --gray-0:   #ffffff;
  --gray-25:  #fafafa;
  --gray-50:  #f5f5f5;
  --gray-100: #ebebeb;
  --gray-200: #d6d6d6;
  --gray-300: #b8b8b8;
  --gray-400: #959595;
  --gray-500: #737373;
  --gray-600: #545454;
  --gray-700: #3d3d3d;
  --gray-800: #262626;
  --gray-900: #141414;

  /* Semantic colors - Status palettes */
  --success-bg:   #f0fdf4; --success-border: #bbf7d0; --success-text: #166534; --success-dot: #22c55e;
  --warning-bg:   #fffbeb; --warning-border: #fde68a; --warning-text: #92400e; --warning-dot: #f59e0b;
  --danger-bg:    #fff1f2; --danger-border:  #fecdd3; --danger-text:  #9f1239; --danger-dot:  #f43f5e;
  --info-bg:      #eff6ff; --info-border:    #bfdbfe; --info-text:    #1e40af; --info-dot:    #3b82f6;
  --neutral-bg:   #f5f5f5; --neutral-border: #d6d6d6; --neutral-text: #545454; --neutral-dot: #737373;
  --purple-bg:    #faf5ff; --purple-border:  #e9d5ff; --purple-text:  #6b21a8; --purple-dot:  #a855f7;

  /* Surfaces */
  --surface-app:      #f0f2f5;
  --surface-sidebar:  #ffffff;
  --surface-card:     #ffffff;
  --surface-header:   #ffffff;
  --surface-hover:    #f0f5ff;
  --surface-active:   #eff6ff;

  /* Borders */
  --border-subtle:  #ebebeb;
  --border-default: #d6d6d6;
  --border-strong:  #b8b8b8;

  /* Text */
  --text-primary:   #141414;
  --text-secondary: #545454;
  --text-tertiary:  #737373;
  --text-disabled:  #b8b8b8;
  --text-inverse:   #ffffff;
  --text-brand:     #2563eb;

  /* Shadows */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:  0 4px 6px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg:  0 10px 15px rgba(0,0,0,0.06), 0 4px 6px rgba(0,0,0,0.04);
  --shadow-xl:  0 20px 25px rgba(0,0,0,0.07), 0 10px 10px rgba(0,0,0,0.03);

  /* Layout dimensions */
  --sidebar-width:       240px;
  --sidebar-collapsed:   64px;
  --topbar-height:       56px;

  /* Spacing scale - 4px base */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;

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

  /* Typography */
  --font-body: 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'DM Mono', 'Courier New', monospace;

  /* Transitions */
  --t-fast: 120ms ease;
  --t-base: 180ms ease;
  --t-slow: 280ms cubic-bezier(.4,0,.2,1);
}

/* RTL support — all directional properties use logical equivalents */
[dir="rtl"] {
  --sidebar-side: right;
}
[dir="ltr"] {
  --sidebar-side: left;
}