/* variables.css - Modern Dark / MP3Tag Pro Theme Variables */
:root {
  --bg-main: #18191c;
  --bg-secondary: #222327;
  --bg-surface: #2b2d31;
  --bg-input: #1e1f22;
  --bg-hover: #35373c;
  --bg-active: #3e4147;
  --bg-selected: #2d3748;
  --bg-selected-focus: #3182ce;
  
  --text-main: #f2f3f5;
  --text-secondary: #949ba4;
  --text-muted: #6d737d;
  --text-invert: #ffffff;
  
  --accent: #3b82f6;
  --accent-hover: #2563eb;
  --accent-light: rgba(59, 130, 246, 0.15);
  
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #06b6d4;

  --border-color: #383a40;
  --border-hover: #4e5058;
  --border-focus: #3b82f6;
  
  --header-height: 42px;
  --toolbar-height: 48px;
  --statusbar-height: 28px;
  --sidebar-width: 240px;
  --editpanel-width: 320px;
  --row-height: 28px;
  
  --font-mono: "Cascadia Code", "Fira Code", Consolas, "Courier New", monospace;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
  --shadow-modal: 0 20px 25px -5px rgba(0, 0, 0, 0.7), 0 10px 10px -5px rgba(0, 0, 0, 0.5);
  
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-full: 9999px;
  
  --transition-fast: 0.12s ease;
  --transition-normal: 0.2s ease;
}

[data-theme="light"] {
  --bg-main: #f8fafc;
  --bg-secondary: #f1f5f9;
  --bg-surface: #ffffff;
  --bg-input: #ffffff;
  --bg-hover: #e2e8f0;
  --bg-active: #cbd5e1;
  --bg-selected: #e0f2fe;
  --bg-selected-focus: #0284c7;
  
  --text-main: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;
  --text-invert: #ffffff;
  
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-light: rgba(37, 99, 235, 0.1);
  
  --border-color: #cbd5e1;
  --border-hover: #94a3b8;
  --border-focus: #2563eb;
}