/* OptimaOS — Dark Mode v2.0 (Aether Nav aligned)
   ────────────────────────────────────────────────────────────── */

/* ── System Dark Mode Preference (Aether dark variables mapped) ── */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        /* Map layout properties directly to optimaos-tokens dark defaults */
        --ink: var(--c-text);
        --ink-2: var(--c-text-2);
        --ink-3: var(--c-text-3);
        --ink-4: var(--c-text-4);
        --ink-5: var(--c-border-3);

        --surface: var(--c-surface);
        --surface-2: var(--c-surface-2);
        --surface-3: var(--c-surface-3);
        --page: var(--c-bg);
        --hover: var(--c-surface-3);
        --selected: var(--c-accent-weak);

        --line: var(--c-border);
        --line-2: var(--c-border-2);

        --action: var(--c-accent);
        --action-hover: var(--c-accent-hover);
        
        --glass-bg: var(--c-glass-bg);
        --glass-border: var(--c-glass-border);
        --glass-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    }
}

/* ── Manual Dark Mode (Aether dark variables mapped) ── */
:root[data-theme="dark"] {
    color-scheme: dark;

    /* Map layout properties directly to optimaos-tokens dark defaults */
    --ink: var(--c-text);
    --ink-2: var(--c-text-2);
    --ink-3: var(--c-text-3);
    --ink-4: var(--c-text-4);
    --ink-5: var(--c-border-3);

    --surface: var(--c-surface);
    --surface-2: var(--c-surface-2);
    --surface-3: var(--c-surface-3);
    --page: var(--c-bg);
    --hover: var(--c-surface-3);
    --selected: var(--c-accent-weak);

    --line: var(--c-border);
    --line-2: var(--c-border-2);

    --action: var(--c-accent);
    --action-hover: var(--c-accent-hover);
    
    --glass-bg: var(--c-glass-bg);
    --glass-border: var(--c-glass-border);
    --glass-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

/* ── Scrollbars, Selections, and Shell Adjustments ── */
:root:not([data-theme="light"]), :root[data-theme="dark"] {
    scrollbar-color: hsl(240, 5%, 40%) hsl(240, 10%, 10%);
}
:root:not([data-theme="light"]) ::-webkit-scrollbar,
:root[data-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
:root:not([data-theme="light"]) ::-webkit-scrollbar-track,
:root[data-theme="dark"] ::-webkit-scrollbar-track {
    background: hsl(240, 10%, 10%);
}
:root:not([data-theme="light"]) ::-webkit-scrollbar-thumb,
:root[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: hsl(240, 5%, 40%);
    border-radius: 4px;
}
:root:not([data-theme="light"]) ::-webkit-scrollbar-thumb:hover,
:root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: hsl(240, 5%, 55%);
}

:root:not([data-theme="light"]) ::selection,
:root[data-theme="dark"] ::selection {
    background: var(--c-accent-weak);
    color: var(--c-text);
}

:root:not([data-theme="light"]) img:not([src*=".svg"]),
:root[data-theme="dark"] img:not([src*=".svg"]) {
    filter: brightness(0.9);
}

:root:not([data-theme="light"]) .app-topbar,
:root[data-theme="dark"] .app-topbar {
    background: var(--c-surface) !important;
    border-bottom: 1px solid var(--c-border) !important;
}

:root:not([data-theme="light"]) .auth-page,
:root[data-theme="dark"] .auth-page {
    background:
        radial-gradient(circle at 78% 18%, hsla(267, 100%, 63%, 0.15), transparent 40%),
        radial-gradient(circle at 12% 82%, hsla(190, 100%, 50%, 0.12), transparent 40%),
        linear-gradient(90deg, rgba(255,255,255,.015) 1px, transparent 1px),
        linear-gradient(rgba(255,255,255,.015) 1px, transparent 1px),
        hsl(240, 10%, 3.9%) !important;
    background-size: auto, auto, 42px 42px, 42px 42px, auto !important;
}

:root:not([data-theme="light"]) .auth-product,
:root[data-theme="dark"] .auth-product {
    background:
        linear-gradient(180deg, hsla(240, 10%, 6%, 0.96), hsla(240, 10%, 10%, 0.96)),
        repeating-linear-gradient(90deg, transparent 0 38px, rgba(255,255,255,.01) 39px 40px),
        repeating-linear-gradient(0deg, transparent 0 38px, rgba(255,255,255,.01) 39px 40px) !important;
}

:root:not([data-theme="light"]) .auth-flow li,
:root[data-theme="dark"] .auth-flow li {
    background: hsla(240, 10%, 12%, 0.82) !important;
}

/* ── Specific Component Adjustments ── */
:root:not([data-theme="light"]) .status-pill.pending,
:root:not([data-theme="light"]) .status-pill.in_progress,
:root:not([data-theme="light"]) .status-pill.on_hold,
:root:not([data-theme="light"]) .status-pill.warning,
:root:not([data-theme="light"]) .status-pill.pending_approval,
:root:not([data-theme="light"]) .status-pill.scheduled,
:root:not([data-theme="light"]) .status-pill.assigned,
:root[data-theme="dark"] .status-pill.pending,
:root[data-theme="dark"] .status-pill.in_progress,
:root[data-theme="dark"] .status-pill.on_hold,
:root[data-theme="dark"] .status-pill.warning,
:root[data-theme="dark"] .status-pill.pending_approval,
:root[data-theme="dark"] .status-pill.scheduled,
:root[data-theme="dark"] .status-pill.assigned {
    color: hsl(38, 90%, 55%) !important;
}

:root:not([data-theme="light"]) .blueprint-command,
:root[data-theme="dark"] .blueprint-command {
    background: var(--c-surface) !important;
}
:root:not([data-theme="light"]) .blueprint-hero,
:root[data-theme="dark"] .blueprint-hero {
    background: var(--c-surface) !important;
}
:root:not([data-theme="light"]) .blueprint-node,
:root[data-theme="dark"] .blueprint-node {
    background: var(--c-surface) !important;
    border-color: var(--line) !important;
}
:root:not([data-theme="light"]) .execution-section.qr-required-callout,
:root[data-theme="dark"] .execution-section.qr-required-callout {
    background: hsla(38, 85%, 45%, 0.12) !important;
}
:root:not([data-theme="light"]) .execution-section.danger-zone,
:root[data-theme="dark"] .execution-section.danger-zone {
    background: hsla(0, 100%, 60%, 0.08) !important;
}

:root:not([data-theme="light"]) .auth-assurance-grid span,
:root[data-theme="dark"] .auth-assurance-grid span {
    border-color: hsla(190, 100%, 50%, 0.25) !important;
    background: hsla(190, 100%, 50%, 0.08) !important;
    color: hsl(190, 100%, 50%) !important;
}
:root:not([data-theme="light"]) .auth-kicker,
:root[data-theme="dark"] .auth-kicker {
    color: var(--c-accent) !important;
}
:root:not([data-theme="light"]) .auth-flow li,
:root[data-theme="dark"] .auth-flow li {
    border-left-color: var(--c-accent) !important;
}

:root:not([data-theme="light"]) .setup-flow-step::before,
:root:not([data-theme="light"]) .identity-summary-fact,
:root:not([data-theme="light"]) .platform-pipeline-group > .platform-pipeline-heading,
:root[data-theme="dark"] .setup-flow-step::before,
:root[data-theme="dark"] .identity-summary-fact,
:root[data-theme="dark"] .platform-pipeline-group > .platform-pipeline-heading {
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.05), transparent) !important;
}
:root:not([data-theme="light"]) .setup-waiting-hint,
:root[data-theme="dark"] .setup-waiting-hint {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.05), transparent) !important;
}