/* ==========================================================================
   Design Tokens & CSS Variables - Modern Dashboard
   ========================================================================== */

:root {
  /* Color Palette - Light Theme Default */
  --bg-app: #f8fafc;
  --bg-surface: #ffffff;
  --bg-surface-elevated: #ffffff;
  --bg-surface-hover: #f1f5f9;
  --bg-surface-active: #e2e8f0;
  --bg-muted: #f1f5f9;
  --bg-overlay: rgba(15, 23, 42, 0.4);

  /* Primary Accents (Indigo / Violet) */
  --primary-50: #eef2ff;
  --primary-100: #e0e7ff;
  --primary-200: #c7d2fe;
  --primary-300: #a5b4fc;
  --primary-400: #818cf8;
  --primary-500: #6366f1;
  --primary-600: #4f46e5;
  --primary-700: #4338ca;
  --primary-800: #3730a3;
  --primary-900: #312e81;

  --primary: var(--primary-600);
  --primary-hover: var(--primary-700);
  --primary-focus: rgba(79, 70, 229, 0.25);
  --primary-light: var(--primary-50);

  /* Text & Typography */
  --text-main: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;
  --text-inverse: #ffffff;

  /* Borders & Dividers */
  --border-color: #e2e8f0;
  --border-light: #f1f5f9;
  --border-focus: var(--primary-500);

  /* Status & Semantic Colors */
  --success: #10b981;
  --success-light: #d1fae5;
  --success-border: #a7f3d0;
  --success-text: #065f46;

  --warning: #f59e0b;
  --warning-light: #fef3c7;
  --warning-border: #fde68a;
  --warning-text: #92400e;

  --danger: #ef4444;
  --danger-light: #fee2e2;
  --danger-border: #fecaca;
  --danger-text: #991b1b;

  --info: #0ea5e9;
  --info-light: #e0f2fe;
  --info-border: #bae6fd;
  --info-text: #075985;

  /* Elevations & Shadows */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.06), 0 1px 2px -1px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
  --shadow-dropdown: 0 10px 25px -5px rgba(15, 23, 42, 0.15), 0 8px 10px -6px rgba(15, 23, 42, 0.1);
  --shadow-glow: 0 0 15px rgba(99, 102, 241, 0.35);

  /* Radii */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-full: 9999px;

  /* Dimensions */
  --sidebar-width: 270px;
  --sidebar-collapsed-width: 80px;
  --header-height: 70px;
  --transition-speed: 0.25s;
  --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);

  /* Fonts */
  --font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
}

/* ==========================================================================
   Dark Theme Overrides
   ========================================================================== */
[data-theme="dark"] {
  --bg-app: #0b0f19;
  --bg-surface: #131b2e;
  --bg-surface-elevated: #1a243b;
  --bg-surface-hover: #1f2b45;
  --bg-surface-active: #243250;
  --bg-muted: #172033;
  --bg-overlay: rgba(0, 0, 0, 0.65);

  --primary: #6366f1;
  --primary-hover: #818cf8;
  --primary-focus: rgba(99, 102, 241, 0.35);
  --primary-light: rgba(99, 102, 241, 0.15);

  --text-main: #f8fafc;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --text-inverse: #0f172a;

  --border-color: #232f48;
  --border-light: #1c273e;
  --border-focus: #818cf8;

  --success-light: rgba(16, 185, 129, 0.15);
  --success-border: rgba(16, 185, 129, 0.3);
  --success-text: #34d399;

  --warning-light: rgba(245, 158, 11, 0.15);
  --warning-border: rgba(245, 158, 11, 0.3);
  --warning-text: #fbbf24;

  --danger-light: rgba(239, 68, 68, 0.15);
  --danger-border: rgba(239, 68, 68, 0.3);
  --danger-text: #f87171;

  --info-light: rgba(14, 165, 233, 0.15);
  --info-border: rgba(14, 165, 233, 0.3);
  --info-text: #38bdf8;

  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.35), 0 2px 4px -2px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
  --shadow-dropdown: 0 14px 28px rgba(0, 0, 0, 0.5), 0 10px 10px rgba(0, 0, 0, 0.35);
  --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.45);
}