:root{
  
  --bg: #F7F8FA;
  --bg-subtle: #F1F3F6;
  --surface: #FFFFFF;
  --surface-elevated: #FFFFFF;
  --surface-hover: #F4F6F9;
  --border: rgba(20, 24, 33, 0.08);
  --border-strong: rgba(20, 24, 33, 0.14);

  
  --text-primary: #12141A;
  --text-secondary: #5B6270;
  --text-tertiary: #8890A0;
  --text-inverse: #FFFFFF;

  
  --accent: #1466E8;
  --accent-hover: #0F56C7;
  --accent-active: #0B47A8;
  --accent-dim: rgba(20, 102, 232, 0.09);
  --accent-border: rgba(20, 102, 232, 0.28);
  --accent-contrast: #FFFFFF;
  --accent-2: #3D8BFF;
  --accent-3: #0B47A8;
  --gradient-accent: linear-gradient(135deg, #3D8BFF 0%, #1466E8 45%, #0A3FA0 100%);
  --gradient-accent-hover: linear-gradient(135deg, #529AFF 0%, #2777F5 45%, #0E4FC2 100%);
  --gradient-surface-3d: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 40%);
  --shadow-accent-glow: 0 8px 20px rgba(20, 102, 232, 0.28), 0 2px 6px rgba(20, 102, 232, 0.22);
  --shadow-accent-glow-lg: 0 20px 45px rgba(20, 102, 232, 0.32), 0 6px 16px rgba(10, 63, 160, 0.24);

  
  --positive: #12875A;
  --positive-dim: rgba(18, 135, 90, 0.10);
  --positive-border: rgba(18, 135, 90, 0.24);
  --negative: #D3392E;
  --negative-dim: rgba(211, 57, 46, 0.09);
  --negative-border: rgba(211, 57, 46, 0.24);
  --warning: #B4740A;
  --warning-dim: rgba(180, 116, 10, 0.10);
  --info: #2A66C7;
  --info-dim: rgba(42, 102, 199, 0.09);
  --neutral-signal: #6B7280;

  
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SF Mono', Menlo, Consolas, monospace;

  
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 48px;
  --space-9: 64px; --space-10: 96px;

  
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-full: 999px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 3px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 4px 10px rgba(16, 24, 40, 0.06), 0 2px 4px rgba(16, 24, 40, 0.05);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.10);
  --shadow-3d: 0 1px 0 rgba(255,255,255,0.6) inset, 0 14px 30px rgba(16, 24, 40, 0.10), 0 4px 10px rgba(16, 24, 40, 0.06);
  --shadow-3d-hover: 0 1px 0 rgba(255,255,255,0.7) inset, 0 26px 50px rgba(16, 24, 40, 0.16), 0 8px 18px rgba(16, 24, 40, 0.08);

  
  --topbar-h: 60px;
  --sidebar-w: 252px;
  --sidebar-w-collapsed: 72px;
  --container-max: 1360px;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 120ms;
  --dur: 180ms;
  --dur-slow: 320ms;
}

[data-theme='dark']{
  --bg: #060B18;
  --bg-subtle: #0A1120;
  --surface: #0F1830;
  --surface-elevated: #131E3A;
  --surface-hover: #172444;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);

  --text-primary: #F2F5FC;
  --text-secondary: #9AA7C4;
  --text-tertiary: #66739A;
  --text-inverse: #060B18;

  --accent: #2E7CFF;
  --accent-hover: #5FA8FF;
  --accent-active: #1E5EDC;
  --accent-dim: rgba(46, 124, 255, 0.14);
  --accent-border: rgba(46, 124, 255, 0.34);
  --accent-contrast: #FFFFFF;
  --accent-2: #5FA8FF;
  --accent-3: #1550C4;
  --gradient-accent: linear-gradient(135deg, #5FA8FF 0%, #2E7CFF 55%, #1550C4 100%);
  --gradient-accent-hover: linear-gradient(135deg, #78B8FF 0%, #4790FF 55%, #1E5EDC 100%);
  --shadow-accent-glow: 0 8px 24px rgba(46, 124, 255, 0.34), 0 2px 8px rgba(46, 124, 255, 0.26);
  --shadow-accent-glow-lg: 0 22px 50px rgba(46, 124, 255, 0.38), 0 8px 20px rgba(21, 80, 196, 0.30);
  --shadow-3d: 0 1px 0 rgba(255,255,255,0.05) inset, 0 14px 34px rgba(0,0,0,0.45), 0 4px 12px rgba(0,0,0,0.32);
  --shadow-3d-hover: 0 1px 0 rgba(255,255,255,0.07) inset, 0 28px 60px rgba(0,0,0,0.55), 0 10px 24px rgba(0,0,0,0.36);

  --positive: #2FD68A;
  --positive-dim: rgba(47, 214, 138, 0.14);
  --positive-border: rgba(47, 214, 138, 0.32);
  --negative: #FF5C6C;
  --negative-dim: rgba(255, 92, 108, 0.14);
  --negative-border: rgba(255, 92, 108, 0.32);
  --warning: #E0A83E;
  --warning-dim: rgba(224, 168, 62, 0.12);
  --info: #5B9BF0;
  --info-dim: rgba(91, 155, 240, 0.12);

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.34);
  --shadow-lg: 0 16px 40px rgba(0,0,0,0.44);
}