:root {
    /* Common UI variables - same for all themes */
    --danger-color: hsl(0 84% 60%);
    --danger-color-text: hsl(0 0% 100%);
    --spacing-xs: 6px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
    --transition-fast: 0.2s ease;
    --shadow-lg: 0 10px 15px -3px hsl(220 15% 20% / 0.1);
    
    /* Available but currently unused - kept for future use */
    --success: hsl(142 76% 45%);
    --success-foreground: hsl(0 0% 100%);
    --warning: hsl(38 92% 50%);
    --warning-foreground: hsl(0 0% 100%);
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --shadow-sm: 0 1px 2px 0 hsl(220 15% 20% / 0.05);
    --shadow-md: 0 4px 6px -1px hsl(220 15% 20% / 0.1);
}

:root,
[data-theme="dark"] {
    /* Dark mode (default) - Design system colors */
    --background: hsl(208 37% 21%);
    --foreground: hsl(0 0% 100%);
    --card: hsl(210 29% 16%);
    --card-foreground: hsl(0 0% 100%);
    --primary: hsl(217 91% 60%);
    --primary-foreground: hsl(0 0% 100%);
    --secondary: hsl(213 94% 68%);
    --secondary-foreground: hsl(0 0% 100%);
    --muted: hsl(210 24% 23%);
    --muted-foreground: hsl(220 9% 65%);
    --accent: hsl(217 91% 60%);
    --accent-foreground: hsl(0 0% 100%);
    --destructive: hsl(0 84% 60%);
    --destructive-foreground: hsl(0 0% 100%);
    --border: hsl(0 0% 100% / 0.1);
    
    /* Legacy variable mappings for backward compatibility */
    --primary-dark: var(--primary);
    --primary-light: var(--secondary);
    --accent-primary: var(--primary);
    --text-primary: var(--foreground);
    --text-secondary: var(--muted-foreground);
    --bg-primary: var(--background);
    --bg-primary-rgb: 15, 23, 42;
    --bg-secondary: var(--card);
    --bg-tertiary: var(--muted);
    --table-header-bg: hsl(210 29% 18%);
    --btn-action-bg: hsl(210 29% 24%);
    --btn-action-text: hsl(0 0% 100%);
    --btn-action-bg-hover: hsl(210 29% 18%);
    --btn-action-border: transparent;
    --link-color: #a1caf3;
    --link-color-hover: #0052a3;
    --bg-gradient-start: #001a2e;
    --bg-gradient-middle: #002d4a;
    --bg-gradient-end: #001a2e;
    
    /* REMOVED - Not currently used in codebase:
     * --popover, --popover-foreground (removed - not used)
     * --input, --ring (removed - not used)
     * --sidebar-* variables (removed - not used, can be added back if sidebar component is created)
     */
}

[data-theme="light"] {
    /* Light mode - Design system colors */
    --background: hsl(0 0% 98%);
    --foreground: hsl(220 15% 20%);
    --card: hsl(0 0% 100%);
    --card-foreground: hsl(220 15% 20%);
    --primary: hsl(217 91% 60%);
    --primary-foreground: hsl(0 0% 100%);
    --secondary: hsl(213 94% 68%);
    --secondary-foreground: hsl(0 0% 100%);
    --muted: hsl(220 14% 96%);
    --muted-foreground: hsl(220 9% 46%);
    --accent: hsl(217 91% 60%);
    --accent-foreground: hsl(0 0% 100%);
    --destructive: hsl(0 84% 60%);
    --destructive-foreground: hsl(0 0% 100%);
    --border: hsl(220 13% 91%);
    
    /* Legacy variable mappings for backward compatibility */
    --primary-dark: var(--primary);
    --primary-light: var(--secondary);
    --accent-primary: var(--primary);
    --text-primary: var(--foreground);
    --text-secondary: var(--muted-foreground);
    --bg-primary: var(--background);
    --bg-primary-rgb: 240, 244, 248;
    --bg-secondary: var(--card);
    --bg-tertiary: var(--muted);
    --table-header-bg: hsl(220 14% 98%);
    --btn-action-bg: hsl(0 0% 100%);
    --btn-action-text: hsl(0 0% 20%);
    --btn-action-bg-hover: hsl(0 0% 95%);
    --btn-action-border: hsl(0 0% 80%);
    --link-color:  var(--accent-primary);
    --link-color-hover: #0052a3;
    --bg-gradient-start: #e8f0f8;
    --bg-gradient-middle: #d0e0f0;
    --bg-gradient-end: #e8f0f8;
}