/* Dark Mode Theme for UVA Rotunda Design System */

:root {
    /* Light mode colors (default) */
    --color-primary: #e87c00;
    --color-info: #324a91;
    --color-success: #008140;
    --color-warning: #e8ad11;
    --color-danger: #860c0e;
    --color-disabled: #555454;
    
    /* Layout colors */
    --color-header-bg: #141e3c;
    --color-nav-bg: #EB5F0C;
    --color-footer-bg: #f1f1ef;
    --color-body-bg: #ffffff;
    --color-body-text: #000000;
    --color-link: #284374;
    --color-link-hover: #6E7A9B;
    
    /* Neutral colors */
    --color-surface: #ffffff;
    --color-surface-secondary: #f2f2f2;
    --color-border: #e2e8f0;
    --color-text-muted: #666666;
    --color-text-secondary: #515252;
}

/* Dark mode theme */
[data-theme="dark"] {
    /* Primary colors - slightly brighter versions for better contrast */
    --color-primary: #ff9500;
    --color-info: #5a7bc8;
    --color-success: #20a55a;
    --color-warning: #f5c842;
    --color-danger: #ef4444;
    --color-disabled: #71717a;
    
    /* Layout colors */
    --color-header-bg: #0a0f1f;
    --color-nav-bg: #c54a0b;
    --color-footer-bg: #1a1a1a;
    --color-body-bg: #0f0f0f;
    --color-body-text: #ffffff;
    --color-link: #60a5fa;
    --color-link-hover: #93c5fd;
    
    /* Neutral colors */
    --color-surface: #1f1f1f;
    --color-surface-secondary: #2a2a2a;
    --color-border: #404040;
    --color-text-muted: #a1a1aa;
    --color-text-secondary: #d4d4d8;
}

/* Apply CSS variables to existing styles */
body {
    background-color: var(--color-body-bg);
    color: var(--color-body-text);
    transition: background-color 0.3s ease, color 0.3s ease;
}

body a {
    color: var(--color-link);
}

body a:hover {
    color: var(--color-link-hover);
}

body > header > main {
    background-color: var(--color-header-bg);
}

body > header > nav {
    background-color: var(--color-nav-bg);
}

body > footer {
    background-color: var(--color-footer-bg);
    color: var(--color-body-text);
}

/* Color utility classes for dark mode */
[data-theme="dark"] .default {
    color: var(--color-primary);
}

[data-theme="dark"] .info {
    color: var(--color-info);
}

[data-theme="dark"] .success {
    color: var(--color-success);
}

[data-theme="dark"] .warning {
    color: var(--color-warning);
}

[data-theme="dark"] .danger {
    color: var(--color-danger);
}

[data-theme="dark"] .disabled {
    color: var(--color-disabled);
}

/* Background color utilities for dark mode */
[data-theme="dark"] .bg-default,
[data-theme="dark"] .bgColor-orange {
    background-color: var(--color-primary);
}

[data-theme="dark"] .bg-info,
[data-theme="dark"] .bgColor-blue {
    background-color: var(--color-info);
}

[data-theme="dark"] .bg-success,
[data-theme="dark"] .bgColor-green {
    background-color: var(--color-success);
}

[data-theme="dark"] .bg-warning,
[data-theme="dark"] .bgColor-yellow {
    background-color: var(--color-warning);
}

[data-theme="dark"] .bg-danger,
[data-theme="dark"] .bgColor-red {
    background-color: var(--color-danger);
}

[data-theme="dark"] .bg-disabled,
[data-theme="dark"] .bgColor-gray {
    background-color: var(--color-disabled);
}

/* Dark mode gradients */
[data-theme="dark"] .bgGradient-orange {
    background-image: linear-gradient(90deg, #ff9500 0, #ff9500 35%, #ffc947 90%, #ffc947);
}

[data-theme="dark"] .bgGradient-blue {
    background-image: linear-gradient(90deg, #1e40af 0, #3b82f6 35%, #60a5fa 90%, #bfdbfe);
}

[data-theme="dark"] .bgGradient-green {
    background-image: linear-gradient(90deg, #15803d 0, #15803d 35%, #22c55e 90%, #22c55e);
}

[data-theme="dark"] .bgGradient-magenta {
    background-image: linear-gradient(90deg, #a21caf 0, #a21caf 35%, #ec4899 90%, #ec4899);
}

[data-theme="dark"] .bgGradient-purple {
    background-image: linear-gradient(90deg, #7c3aed 0, #8b5cf6 35%, #a78bfa 90%, #c4b5fd);
}

/* Surface and border colors */
[data-theme="dark"] table,
[data-theme="dark"] .surface {
    background-color: var(--color-surface);
    border-color: var(--color-border);
}

[data-theme="dark"] th,
[data-theme="dark"] td {
    border-color: var(--color-border);
}

[data-theme="dark"] .surface-secondary {
    background-color: var(--color-surface-secondary);
}

/* Form elements */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background-color: var(--color-surface);
    color: var(--color-body-text);
    border-color: var(--color-border);
}

[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(255, 149, 0, 0.1);
}

/* Navigation and aside elements */
[data-theme="dark"] aside {
    background-color: var(--color-surface);
    border-color: var(--color-border);
}

[data-theme="dark"] nav.breadcrumbs > header > a {
    color: var(--color-body-text);
}

[data-theme="dark"] nav.breadcrumbs > header > a:hover {
    color: var(--color-text-muted);
}

/* Button styles */
[data-theme="dark"] .btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #000000;
}

[data-theme="dark"] .btn-secondary {
    background-color: var(--color-surface-secondary);
    border-color: var(--color-border);
    color: var(--color-body-text);
}

/* Code and pre elements */
[data-theme="dark"] code {
    background-color: var(--color-surface-secondary);
    color: var(--color-body-text);
}

[data-theme="dark"] pre {
    background-color: var(--color-surface);
    color: var(--color-body-text);
    border-color: var(--color-border);
}

/* Alert styles for dark mode */
[data-theme="dark"] .alert-default {
    background-color: rgba(255, 149, 0, 0.1);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

[data-theme="dark"] .alert-info {
    background-color: rgba(90, 123, 200, 0.1);
    border-color: var(--color-info);
    color: var(--color-info);
}

[data-theme="dark"] .alert-success {
    background-color: rgba(32, 165, 90, 0.1);
    border-color: var(--color-success);
    color: var(--color-success);
}

[data-theme="dark"] .alert-warning {
    background-color: rgba(245, 200, 66, 0.1);
    border-color: var(--color-warning);
    color: var(--color-warning);
}

[data-theme="dark"] .alert-danger {
    background-color: rgba(239, 68, 68, 0.1);
    border-color: var(--color-danger);
    color: var(--color-danger);
}

/* Theme toggle anchor */
a.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

a.theme-toggle:hover {
    opacity: 0.8;
}

a.theme-toggle svg {
    width: 24px;
    height: 24px;
    color: #fff;
    display: block;
}

/* Hide/show theme toggle icons */
[data-theme="light"] .theme-toggle .dark-icon {
    display: none;
}

[data-theme="dark"] .theme-toggle .light-icon {
    display: none;
}

/* Sidebar dark mode overrides */
[data-theme="dark"] .sidebar > aside {
    background-color: var(--color-surface);
    border-color: var(--color-border);
}

[data-theme="dark"] .sidebar-toggle {
    color: var(--color-body-text);
}

/* Table improvements for dark mode */
[data-theme="dark"] table {
    border-collapse: collapse;
}

[data-theme="dark"] th {
    background-color: var(--color-surface-secondary);
    color: var(--color-body-text);
}

[data-theme="dark"] tbody tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.02);
}

[data-theme="dark"] tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.05);
}