/* ============================================================================ LIGHT THEME LAYER (prototype) Activated by `data-theme="light"` on (set pre-paint from localStorage; see layouts/default.html). The dark theme is the default and is untouched — every rule below is scoped under html[data-theme="light"]. Must load AFTER theme-override.css: it redefines that file's tokens and out-specifies its stragglers, relying on source order for equal-specificity wins. Strategy: (1) redefine the semantic tokens for light so the ~860 var(--…) references flip automatically; (2) override the stragglers that hard-code translucent-white / dark-hex surfaces directly. Chrome (body/navbar/logo/ sidebar) is flipped to the vendor "white" data-background-color variants by JS, so vendor chrome handles the nav; the rules here are the flash-free safety net + content-area overrides. ============================================================================ */ html[data-theme="light"] { color-scheme: light; /* Accent palette: the dark theme uses the pastel -400 tier (tuned for dark backgrounds); on white those read washed-out. Drop every accent to the deeper -600 tier — same hues, more ink. The rgba(var(--*-rgb)) tints follow via the -rgb twins below. */ --color-blue: #2563eb; --color-blue-hover: #1d4ed8; --color-green: #059669; --color-orange: #d97706; --color-red: #dc2626; --color-purple: #9333ea; --color-gray: #64748b; --color-yellow: #ca8a04; --color-teal: #0d9488; --color-pink: #db2777; --color-rose: #e11d48; --color-lime: #65a30d; --color-indigo: #4f46e5; --color-cyan: #0891b2; --color-brown: #9c7a52; --bs-primary-rgb: 37, 99, 235; --bs-success-rgb: 5, 150, 105; --bs-warning-rgb: 217, 119, 6; --bs-danger-rgb: 220, 38, 38; --bs-info-rgb: 147, 51, 234; --bs-secondary-rgb: 100, 116, 139; /* Subtle black-on-white tints replace the white-on-dark tints */ --surface-0: linear-gradient(135deg, #ffffff 0%, #fbfcfe 100%); --surface-1: rgba(0, 0, 0, 0.025); --surface-2: rgba(0, 0, 0, 0.045); --surface-3: rgba(0, 0, 0, 0.07); --border-subtle: rgba(0, 0, 0, 0.07); --border-normal: rgba(0, 0, 0, 0.12); --border-emphasis: rgba(0, 0, 0, 0.18); /* Dark text on light. Near-black (#1c1f27) read harsh against the bright white cards. The WHOLE ramp is lifted into grey-slate territory — most content text inherits --text-primary via .main-panel, so this is the real lever. Still monotonic (primary darkest → muted lightest) and each tier clears AA on white (primary ~7.7:1 … muted ~4.6:1). */ --text-primary: #434b59; --text-secondary: #565e6d; --text-tertiary: #656c7a; --text-tertiary-rgb: 101, 108, 122; --text-muted: #7c8291; --text-muted-rgb: 124, 130, 145; /* Alerts: faint tint over a light base */ --alert-base: #f4f6f9; --alert-tint-strong: 0.07; --alert-tint-faint: 0.03; /* Form controls */ --input-bg: #ffffff; --input-bg-focus: #ffffff; --input-bg-disabled: #eef0f3; --input-border: rgba(0, 0, 0, 0.18); --input-border-hover: rgba(0, 0, 0, 0.3); --input-border-focus: rgba(var(--bs-primary-rgb), 0.55); /* Selects */ --select-dropdown-bg: #ffffff; --select-option-bg: #ffffff; --select-option-bg-hover: #eef3fb; --select-option-bg-active: #dde8fa; --select-option-border-active: rgba(var(--bs-primary-rgb), 0.45); --select-arrow-color: rgba(0, 0, 0, 0.5); /* Bootstrap light/dark helper tokens flip meaning on a light page */ --bs-light: rgba(0, 0, 0, 0.05); --bs-light-rgb: 0, 0, 0; --bs-dark: rgba(0, 0, 0, 0.78); --bs-dark-rgb: 0, 0, 0; /* Tokens defined in per-app/extra stylesheets */ --chrome-seam: rgba(0, 0, 0, 0.1); --pop-bg: #ffffff; --routing-base: #f1f3f6; } /* Page background + base text */ html[data-theme="light"] body, html[data-theme="light"] .main-panel { background-color: #eef1f5 !important; color: var(--text-primary); } /* --- "beta" badge next to the theme toggle: only meaningful while the (still in-progress) light theme is active, so it's hidden by default and revealed under the light data-theme. --- */ .theme-beta-badge { display: none; } html[data-theme="light"] .theme-beta-badge { display: inline-flex; align-items: center; margin-right: 0.4rem; padding: 0.1rem 0.4rem; border: 1px solid rgba(126, 34, 206, 0.38); border-radius: 999px; background: rgba(126, 34, 206, 0.12); color: #7e22ce; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; } /* Wider cap for the beta explainer tooltip (default .tooltip-inner is 200px). */ .theme-beta-tooltip .tooltip-inner { max-width: 320px !important; } /* --- Chrome: tinted left panel + crisp seams (JS also swaps to vendor "white"). The sidebar column reads as a distinct near-white panel against the #eef1f5 content canvas; firm #dde2ea seams keep the top bar and rail from bleeding into the white cards. --- */ html[data-theme="light"] .navbar-header { background: #f8fafc !important; } /* Seam lives only on the outer wrapper — .navbar-header and .logo-header nest inside it, so bordering all three stacked a doubled line. */ html[data-theme="light"] .main-header { background: #f8fafc !important; border-bottom: 1px solid #dde2ea !important; } html[data-theme="light"] .logo-header { background: #f8fafc !important; border-right: 1px solid #dde2ea !important; } html[data-theme="light"] .sidebar, html[data-theme="light"] .sidebar[data-background-color="dark2"] { background: #f8fafc !important; border-right: 1px solid #dde2ea !important; } /* Sidebar nav: the vendor "white" skin paints link text a muddy #575962 and icons a washed #8d9498. Pull both to our tokens for firmer contrast; the blue active state (higher specificity) is untouched. */ html[data-theme="light"] .sidebar .nav > .nav-item a { color: var(--text-secondary); } html[data-theme="light"] .sidebar .nav > .nav-item a i { color: var(--text-tertiary); } /* Sidebar seams/sections that hard-code translucent white */ html[data-theme="light"] .sidebar .nav-section, html[data-theme="light"] .sidebar .nav-collapse { border-color: var(--border-subtle) !important; } html[data-theme="light"] .sidebar .nav-section h4.text-section { color: rgba(0, 0, 0, 0.45); } html[data-theme="light"] .sidebar .pl-2[style] { border-bottom-color: var(--border-subtle) !important; } /* Edge pull-tab: default tokens paint it a white gradient (--surface-0) with a darker rgba(0,0,0,0.1) seam, so it reads as a separate chip with a hard edge. Match the sidebar's own solid surface and border so the tab flows out of the sidebar's edge with no visible joint. */ html[data-theme="light"] .sidebar-collapse-toggle { background: #f8fafc; border-color: #dde2ea; } /* --- Fieldsets --- */ /* In dark, surface-1 (a white tint) sits *above* the page. On light that same token is a black tint, so the panel sank *below* the page — a muddy grey box under a lighter page. Flip top-level fieldsets to white so they read as raised like cards; nested fieldsets keep the tint to step inward. */ html[data-theme="light"] fieldset { background: #ffffff; /* Soft, faded edge instead of the hard 0.12 line. The panel reads as raised via the subtle shadow, so the border can drop to a whisper — which also makes the native legend notch's ragged ends effectively invisible. */ border-color: rgba(0, 0, 0, 0.06); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); } html[data-theme="light"] fieldset:hover { border-color: rgba(0, 0, 0, 0.1); } html[data-theme="light"] fieldset fieldset { background: var(--surface-1); box-shadow: none; } /* --- Cards --- */ html[data-theme="light"] .card { border: 1px solid var(--border-normal); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04); } html[data-theme="light"] .card-light2 { background: #f7f8fa !important; } html[data-theme="light"] .card-dark { background: linear-gradient(135deg, #f7f8fa, #eef1f5) !important; } html[data-theme="light"] .bg-deep-dark, html[data-theme="light"] .card-deep-dark { background: #f7f8fa !important; border-color: var(--border-normal) !important; } html[data-theme="light"] .card-deep-dark .card-header { background: var(--surface-2); border-bottom-color: var(--border-normal) !important; } html[data-theme="light"] .card-hover:hover { background: linear-gradient(135deg, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.01) 100%) !important; } /* --- Modals --- */ html[data-theme="light"] .modal-content { background: #ffffff !important; border: 1px solid var(--border-emphasis) !important; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18) !important; } html[data-theme="light"] .modal-header { background: #f7f8fa !important; border-bottom-color: var(--border-normal) !important; } html[data-theme="light"] .modal-footer { background: #f7f8fa !important; border-top-color: var(--border-normal) !important; } /* --- Dropdown menus --- */ html[data-theme="light"] .dropdown-menu { background: #ffffff !important; border: 1px solid var(--border-normal) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); } html[data-theme="light"] .dropdown-item { color: var(--text-secondary); } html[data-theme="light"] .dropdown-item:hover, html[data-theme="light"] .dropdown-item:focus { background: var(--surface-2); color: var(--text-primary); } /* --- Chips --- */ html[data-theme="light"] .chip { color: #475569; background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.1); } html[data-theme="light"] .chip-plain { color: #5f6472; } html[data-theme="light"] .chip-hover:hover { background: rgba(0, 0, 0, 0.07); border-color: rgba(0, 0, 0, 0.16); } /* --- Breadcrumb (inline