/**
 * OIC Media Archive — Dark Mode CSS Custom Properties
 *
 * Section 20.1 of system-overview.md
 * Light mode (default) on :root, dark mode on [data-theme="dark"]
 */

/* Light mode (default) */
:root {
    --oma-bg-primary: #f8f9fa;
    --oma-bg-secondary: #ffffff;
    --oma-bg-card: #ffffff;
    --oma-bg-sidebar: #ffffff;
    --oma-bg-header: #1a3a2a;
    --oma-text-primary: #212529;
    --oma-text-secondary: #6b7280;
    --oma-text-muted: #9ca3af;
    --oma-border: #e5e7eb;
    --oma-border-light: #f3f4f6;
    --oma-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    --oma-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    --oma-accent: #c9a84c;
    --oma-brand: #1a3a2a;
}

/* Dark mode */
[data-theme="dark"] {
    --oma-bg-primary: #0f172a;
    --oma-bg-secondary: #1e293b;
    --oma-bg-card: #1e293b;
    --oma-bg-sidebar: #1e293b;
    --oma-bg-header: #0c1a12;
    --oma-text-primary: #f1f5f9;
    --oma-text-secondary: #94a3b8;
    --oma-text-muted: #64748b;
    --oma-border: #334155;
    --oma-border-light: #1e293b;
    --oma-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    --oma-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
    --oma-accent: #d4b054;
    --oma-brand: #245438;
}

/* =============================================
   Dark mode overrides for semantic elements
   ============================================= */

[data-theme="dark"] body {
    background-color: var(--oma-bg-primary);
    color: var(--oma-text-primary);
}

[data-theme="dark"] .header {
    background-color: var(--oma-bg-header);
}

[data-theme="dark"] .card,
[data-theme="dark"] .asset-card {
    background-color: var(--oma-bg-card);
    border-color: var(--oma-border);
}

[data-theme="dark"] .sidebar {
    background-color: var(--oma-bg-sidebar);
    border-color: var(--oma-border);
}

[data-theme="dark"] .footer {
    background-color: var(--oma-bg-header);
}

[data-theme="dark"] .text-muted,
[data-theme="dark"] .text-secondary {
    color: var(--oma-text-muted) !important;
}

[data-theme="dark"] .border,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-top {
    border-color: var(--oma-border) !important;
}

[data-theme="dark"] .bg-light {
    background-color: var(--oma-bg-secondary) !important;
}

[data-theme="dark"] .bg-white {
    background-color: var(--oma-bg-card) !important;
}

[data-theme="dark"] .shadow-sm,
[data-theme="dark"] .shadow {
    box-shadow: var(--oma-shadow) !important;
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: var(--oma-bg-secondary);
    border-color: var(--oma-border);
    color: var(--oma-text-primary);
}

[data-theme="dark"] .dropdown-menu {
    background-color: var(--oma-bg-card);
    border-color: var(--oma-border);
}

[data-theme="dark"] .dropdown-item {
    color: var(--oma-text-primary);
}

[data-theme="dark"] .dropdown-item:hover {
    background-color: var(--oma-bg-secondary);
}

[data-theme="dark"] .modal-content {
    background-color: var(--oma-bg-card);
    border-color: var(--oma-border);
}

[data-theme="dark"] .badge.bg-light {
    background-color: var(--oma-bg-secondary) !important;
    color: var(--oma-text-primary) !important;
}

/* Accessibility: focus indicators */
:focus-visible {
    outline: 3px solid var(--oma-accent);
    outline-offset: 2px;
}

/* Skip to content */
.skip-to-content {
    position: absolute;
    top: -100%;
    left: 0;
    z-index: 9999;
    padding: 1rem;
    background: var(--oma-brand);
    color: white;
    text-decoration: none;
    font-weight: 600;
}
.skip-to-content:focus {
    top: 0;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}