/* Light appearance: original WebsiteGlass materials over the shared PHP layouts. */
:root[data-theme="light"] {
    color-scheme: light;
    --canvas: #e9f0f9;
    --ink: #182c43;
    --text: #30465e;
    --muted: #536b82;
    --faint: #60758b;
    --surface: rgba(255, 255, 255, .66);
    --surface-subtle: rgba(247, 251, 255, .56);
    --surface-hover: rgba(255, 255, 255, .82);
    --surface-inset: rgba(78, 114, 156, .09);
    --line: rgba(69, 105, 147, .17);
    --line-soft: rgba(255, 255, 255, .6);
    --line-strong: rgba(43, 79, 121, .4);
    --glass: rgba(255, 255, 255, .48);
    --glass-sidebar: rgba(247, 252, 255, .52);
    --glass-popup: rgba(249, 252, 255, .94);
    --glass-highlight: rgba(255, 255, 255, .9);
    --logo-background: #ffffff4d;
    --glass-blur: 24px;
    --glass-saturation: 160%;
    --brand-600: #1766c4;
    --brand-500: #1766c4;
    --brand-50: rgba(218, 235, 255, .65);
    --appearance-control-text: #465f79;
    --auth-text: #183c4c;
    --auth-muted: #456775;
    --auth-accent: #126d72;
    --auth-line: rgba(255, 255, 255, .62);
    --auth-tile: rgba(255, 255, 255, .38);
    --shadow-sm: 0 6px 24px rgba(45, 76, 117, .065), inset 0 1px 0 rgba(255, 255, 255, .8);
    --shadow-md: 0 14px 40px rgba(45, 76, 117, .13);
    --shadow-lg: 0 24px 80px rgba(45, 76, 117, .2);
}

html[data-theme="light"] body {
    background-color: var(--canvas);
    background-image: radial-gradient(ellipse at 0% 12%, rgba(141, 215, 235, .65), transparent 46%), radial-gradient(ellipse at 92% 2%, rgba(182, 169, 240, .5), transparent 42%), radial-gradient(ellipse at 65% 95%, rgba(148, 223, 194, .48), transparent 48%);
    background-attachment: fixed;
}

/* Frosted fallback stays usable while the local React bundle starts. */
html[data-theme="light"] :is(.card, .metric-card, .project-card, .planning-command, .dashboard-operational-card, .auth-card, .chat-shell) {
    background: var(--surface);
    border-color: rgba(255, 255, 255, .7);
    backdrop-filter: blur(20px) saturate(1.5);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
}
html[data-theme="light"] .auth-refresh .auth-brand-panel {
    background: linear-gradient(145deg, rgba(211, 242, 239, .7), rgba(219, 230, 253, .48));
    border: 1px solid rgba(255, 255, 255, .6);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(24px) saturate(1.5);
    -webkit-backdrop-filter: blur(24px) saturate(1.5);
}
html[data-theme="light"] .auth-refresh .auth-card { background: var(--surface); }
html[data-theme="light"] .auth-refresh .auth-form-panel { background: transparent; }
html[data-theme="light"] .sidebar::before,
html[data-theme="light"] .sidebar::after { opacity: .035; }
html[data-theme="light"] .theme-selector { background: rgba(255, 255, 255, .38); }
html[data-theme="light"] .theme-choice[aria-pressed="true"] { background: rgba(255, 255, 255, .8); }
html[data-theme="light"] .main-nav a.active { background: rgba(255, 255, 255, .65); border-color: rgba(255, 255, 255, .85); box-shadow: var(--shadow-sm); }

html[data-theme="light"] :is(.account-menu-panel, .organization-options, .dev-switcher-menu, .role-menu, .modal-dialog, .command-dialog)[data-website-glass] { background: rgba(247, 251, 255, .7); }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    :root[data-theme="light"] { --surface: #f7faff; --glass: #f4f8ff; --glass-sidebar: #edf5fc; --glass-popup: #f7faff; }
    html[data-theme="light"] [data-website-glass] { background: var(--surface); }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more), (forced-colors: active) {
    :root[data-theme="light"] {
        --surface: #ffffff;
        --surface-subtle: #f1f5fb;
        --glass: var(--surface);
        --glass-sidebar: var(--surface-subtle);
        --glass-popup: var(--surface);
        --line: var(--line-strong);
        --line-soft: var(--line-strong);
    }
    html[data-theme="light"] body { background-image: none; }
    html[data-theme="light"] :is(.card, .metric-card, .project-card, .planning-command, .dashboard-operational-card, .auth-card, .auth-refresh .auth-card, .chat-shell, .auth-refresh .auth-brand-panel, .sidebar, .topbar) {
        background: var(--surface);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}