/* ── Variables ─────────────────────────────────────────── */ :root { --ink: #0d1626; --ink2: #111d33; --ink3: #18253f; --ink4: #1f2e49; --ink5: #273755; --line: rgba(160,120,32,0.12); --line2: rgba(160,120,32,0.18); --line3: rgba(160,120,32,0.32); --gold: #a27920; --gold-lt: #c19828; --gold-dim: rgba(160,120,32,0.10); --gold-glow: rgba(160,120,32,0.25); --smoke: #e8eaf0; --smoke2: #9aa3b4; --smoke3: #758098; --smoke4: #6a81a9; --green: #329159; --green-lt: #3db36e; --red: #d85353; --red-lt: #d65648; --amber: #a4790d; --amber-lt: #c49a16; --sidebar: 312px; --topbar: 56px; --botbar: 64px; --f-display: 'Cormorant Garamond', Georgia, serif; --f-mono: 'DM Mono', 'Courier New', monospace; --f-body: 'Outfit', sans-serif; --f-ui: 'Jost', 'Outfit', sans-serif; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --r: 6px; --r2: 10px; /* Surface colors — component backgrounds */ --surface: #111d33; /* card / elevated surface (dark mode = ink2) */ --surface2: #18253f; /* slightly lighter surface */ --surface3: #1f2e49; /* even lighter */ --surface-text: #e8eaf0; /* primary text on surface (= smoke) */ --ink-deep: #0d1626; /* deepest background */ --border-strong: rgba(160,120,32,0.45); /* strong border */ --border-dark: rgba(160,120,32,0.25); /* medium border */ --accent: #4b83c0; /* accent blue (light mode secondary) */ } /* ── Reset ─────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { height: 100%; -webkit-text-size-adjust: 100%; } body { height: 100%; overflow: hidden; background: var(--ink); color: var(--smoke); font-family: var(--f-body); font-weight: 300; font-size: 13px; letter-spacing: 0.01em; -webkit-font-smoothing: antialiased; } /* ── Topographic SVG overlay ───────────────────────────── */ #topo-overlay { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; opacity: 0.60; } #topo-overlay svg { width: 100%; height: 100%; } /* Topographic overlay is gold line-work designed for a dark bg. On light bg it reads as muddy yellow against off-white. Hide it in light mode — the login page is cleaner without it anyway. */ body[data-theme="light"] #topo-overlay { display: none; } /* Grain texture */ body::before { content: ''; position: fixed; inset: 0; z-index: 1; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.035'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 128px 128px; } body[data-theme="light"]::before { opacity: 0.5; } /* ── Gold metal variables ───────────────────────────────── */ :root { --gold-metal-1: #e8c560; /* bright highlight */ --gold-metal-2: #c19828; /* warm mid */ --gold-metal-3: #ba8e1f; /* base gold */ --gold-metal-4: #ae840f; /* shadow gold */ --gold-shine: linear-gradient(105deg, transparent 20%, rgba(210,175,90,0.08) 35%, rgba(210,175,90,0.18) 45%, rgba(210,175,90,0.08) 55%, transparent 70% ); } /* ── Light mode overrides ───────────────────────────────── Activated by `data-theme="light"` on . Scoped entirely through CSS variables so every component that uses var(--gold), var(--smoke), etc. picks up the right color automatically with no per-component code. Palette: deep steel blue + cool greys replace the gold + warm greys. CONTRAST, CORRECTED 2026-07-27. This block used to claim "Every contrast pair has been checked to pass WCAG AA (4.5:1) for body text and 3:1 for large text / non-text elements." That was FALSE, and measurably so -- computed from these very token values against the page background: DARK (--ink #0d1626): 10 of 17 text tokens below 4.5:1 LIGHT (--ink #EEF3FA): 8 of 17 text tokens below 4.5:1 Four of them are below even the 3:1 large-text floor. The worst offender is --smoke4 at 1.58:1 in dark mode, and it is used as a TEXT COLOUR 242 times. --smoke3 is 3.01:1 across another 160. A comment asserting a control that does not hold is worse than no comment: it stops the next person checking. The real position is recorded in tests/unit/token-contrast-ratchet.test.mjs, which COMPUTES every ratio and pins the current values as a floor -- so no token can quietly get worse, and the remaining failures are tracked debt rather than a false claim. Tokens whose fix is visually imperceptible (<3% lightness change) have been corrected here. The rest change the product's appearance materially and are Tim's call, not a WCAG number's. */ body[data-theme="light"] { /* Backgrounds — near-white, aligned with the --surface* ramp below */ /* LIGHT PALETTE CORRECTION 2026-07-26. The --ink* ramp was mid-grey (#B0BDD0 page, #A8B0BA cards) while the newer --surface* ramp below is pure white. Both are live: 118 rules use --ink*, 137 use --surface*, so the UI rendered white cards next to grey ones with only ~4% lightness between page and panel -- no depth hierarchy and a dingy cast over everything. This aligns the ink ramp with the surface ramp so the two systems agree: page slightly tinted, panels lighter, chips lightest. Every value keeps the same blue-grey hue, only lightness is corrected. */ --ink: #EEF3FA; /* base page — barely-tinted near-white */ --ink2: #FFFFFF; /* card / panel surface — white, matches --surface */ --ink3: #E4EDF8; /* sunken / muted area — recedes below the page */ --ink4: #F2F6FC; /* chip / pill */ --ink5: #E0EAF6; /* hover state — visible against both page and card */ /* Borders — soft sky-blue tint */ --line: rgba(60, 100, 145, 0.18); --line2: rgba(60, 100, 145, 0.32); --line3: rgba(60, 100, 145, 0.50); /* Primary accent — atmospheric blue, brighter and warmer than steel */ --gold: #2D5A8F; /* deep sky — buttons, primary accents */ --gold-lt: #3b70ae; /* brighter sky — hovers, highlights */ --gold-dim: rgba(74, 130, 194, 0.10); /* very faint sky-blue tint */ --gold-glow: rgba(74, 130, 194, 0.28); /* glow tint */ /* Text — dark navies for contrast on light backgrounds. Tightened on May 3 — earlier values were too soft, text was getting lost against the pale cloud cards. These darker values pass WCAG AA on the atmospheric backgrounds. */ --smoke: #051324; /* primary text — near-black navy, max contrast */ --smoke2: #1A3A5F; /* secondary text — deep ocean navy, was #355072 */ --smoke3: #355072; /* muted text — was #5B7395 */ --smoke4: #597092; /* heavily muted */ /* Status colors — darkened to remain readable on light bg */ --green: #157f3d; --green-lt: #167f3d; --red: #991B1B; --red-lt: #d82323; --amber: #B45309; --amber-lt: #a65b05; /* Metallic gradient family — atmospheric sky version of the gold gradient */ --gold-metal-1: #336aa3; /* bright sky highlight */ --gold-metal-2: #336298; /* mid sky */ --gold-metal-3: #2D5A8F; /* base deep sky */ --gold-metal-4: #1A3A5F; /* shadow sky */ --gold-shine: linear-gradient(105deg, transparent 20%, rgba(74, 130, 194, 0.08) 35%, rgba(74, 130, 194, 0.20) 45%, rgba(74, 130, 194, 0.08) 55%, transparent 70% ); /* Surface colors — light mode equivalents */ --surface: #FFFFFF; /* card background — pure white */ --surface2: #F2F6FC; /* secondary card */ --surface3: #E4EDF8; /* tertiary */ --surface-text: #051324; /* = smoke in light */ --ink-deep: #0F2540; /* deepest dark in light = primary heading color */ --border-strong: rgba(30,58,95,0.40); /* strong border */ --border-dark: rgba(30,58,95,0.22); /* medium border */ --accent: #3B6FA8; /* accent blue */ } /* Demo overlay stays dark regardless of theme. The cinematic 3D experience is not designed to work on a light field — the gold particles, the dark space, the glow-based visuals all depend on a black background. When the demo is active, we reset variables inside it back to their dark values. Same treatment for the login card in light mode — the card is a premium artifact with a heavy dark-first design (metallic gold frame, recessed vault effect, gold glows). Rebuilding it for light would lose the whole identity. In light mode, the card becomes a dark centerpiece surrounded by a light page — distinctive and still on-brand. */ body[data-theme="light"] .login-card, body[data-theme="light"] .login-wordmark, body[data-theme="light"] .login-sub, body[data-theme="light"] .login-mark, body[data-theme="light"] .login-frame-box { --ink: #050810; --ink2: #080d18; --ink3: #0d1525; --ink4: #131e30; --ink5: #1a2840; --line: rgba(160,120,32,0.12); --line2: rgba(160,120,32,0.18); --line3: rgba(160,120,32,0.32); --gold: #a07820; --gold-lt: var(--gold-lt); --gold-dim: rgba(160,120,32,0.10); --gold-glow: rgba(160,120,32,0.25); --smoke: #e8eaf0; --smoke2: #9aa3b4; --smoke3: #5a6378; --smoke4: #2e3a50; --gold-metal-1: var(--gold-lt); --gold-metal-2: var(--gold-lt); --gold-metal-3: var(--gold); --gold-metal-4: #5a4408; } /* ── Theme toggle button ────────────────────────────────── Small circular icon button, top-right of the login screen (and later of the main app chrome). Shows a moon in light mode (tap to switch to dark) and a sun in dark mode (tap to switch to light). */ /* ⚠ FINDING-052: THIS RULESET IS DEAD, AND IT IS A TRAP. `#theme-toggle` carries only `csp-mig-26` -- a 32px SQUARE, `border-radius: 4px`, `margin-left: 4px`, sitting INLINE in a flex row. Nothing matches `.theme-toggle`. The tempting fix for FINDING-052 was to add that class to the button. **Do not.** It would apply `position: fixed` at the top-right of the viewport and a 36px circle, relocating a control that is currently correctly placed. The icon rules below are repointed to the ID instead. Left in place rather than deleted: removing dead CSS across the whole app is FINDING-054's sweep, and doing it one ruleset at a time is how a stylesheet ends up half-migrated. The warning is what makes it safe to leave. */ .theme-toggle { position: fixed; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line2); background: var(--ink2); color: var(--smoke2); cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 1000; transition: color 0.2s, border-color 0.2s, background 0.2s; } .theme-toggle:hover { color: var(--gold); border-color: var(--line3); } .theme-toggle svg { width: 16px; height: 16px; } /* In dark mode, show the sun icon (click to switch TO light). In light mode, show the moon icon (click to switch TO dark). */ /* FINDING-052: THESE TARGETED `.theme-toggle`, WHICH THE BUTTON DOES NOT CARRY. index.html's `#theme-toggle` has exactly one class: `csp-mig-26`. So every one of these descendant rules was dead, and **both the moon and the sun rendered at once, in both themes** -- on every page load. The control looked broken even though the theme switch itself works (main-1-login-theme-2.css:363 targets `#theme-toggle` and does change the background). REPOINTED TO THE ID rather than adding the class to the button. See the warning on the `.theme-toggle` layout ruleset above: adopting that class would ALSO apply `position: fixed; top/right: 16px; 36px; border-radius: 50%`, tearing the button out of the inline flex row `csp-mig-26` places it in. The obvious one-word fix is a regression. */ body[data-theme="dark"] #theme-toggle .theme-toggle-moon { display: none; } body[data-theme="light"] #theme-toggle .theme-toggle-sun { display: none; } /* Default (no data-theme attr yet): show sun (initial script sets dark or light) */ body:not([data-theme="light"]) #theme-toggle .theme-toggle-moon { display: none; } /* ── Light mode component overrides ───────────────────────── The variable-swap approach handles anything that uses var(--foo). These overrides handle the many components with HARDCODED dark colors in their gradients, shadows, and text that won't flip automatically. Each rule below replaces a dark-mode literal with a light-mode equivalent that preserves the design intent. */ /* Sidebar — dark sidebar becomes a subtle cool-grey panel. Uses !important on background because the original #sidebar rule sets heavy inset dark shadows that compete visually. */ body[data-theme="light"] #sidebar { background: linear-gradient(180deg, #0d1525 0%, var(--ink-deep) 100%) !important; box-shadow: inset -1px 0 0 rgba(160,120,32,0.15), 4px 0 16px rgba(0,0,0,0.25) !important; } body[data-theme="light"] #sidebar::after { display: none !important; } body[data-theme="light"] .sb-nav, body[data-theme="light"] .sb-depts, body[data-theme="light"] .sb-footer { background: transparent !important; } body[data-theme="light"] #sb-nav, body[data-theme="light"] #sb-depts { background: transparent !important; } body[data-theme="light"] #sidebar::before { background: linear-gradient(180deg, transparent 0%, rgba(160,120,32,0.20) 30%, rgba(160,120,32,0.35) 50%, rgba(160,120,32,0.20) 70%, transparent 100% ); opacity: 0.6; } /* Sidebar toggle chevron */ body[data-theme="light"] #sb-toggle { background: linear-gradient(90deg, #0d1525 0%, var(--ink-deep) 100%); border-color: rgba(160,120,32,0.25); color: rgba(160,120,32,0.70); } body[data-theme="light"] #sb-toggle:hover { color: rgba(160,120,32,1.0); border-color: rgba(160,120,32,0.50); } /* Sidebar header — keep dark, matches overall sidebar */ body[data-theme="light"] .sb-header { background: linear-gradient(160deg, var(--ink-deep) 0%, #050810 100%); } /* Nav items — gold text on dark sidebar */ body[data-theme="light"] .nav-btn { color: rgba(160,120,32,0.65); } body[data-theme="light"] .nav-btn:hover { background: rgba(160,120,32,0.08); color: rgba(160,120,32,0.95); border-color: rgba(160,120,32,0.18); box-shadow: 0 1px 3px rgba(0,0,0,0.2); } body[data-theme="light"] .nav-btn.active { background: rgba(160,120,32,0.12); color: var(--gold-lt); text-shadow: 0 0 12px rgba(160,120,32,0.3); border-color: transparent; border-bottom-color: rgba(160,120,32,0.30); box-shadow: inset 0 1px 3px rgba(0,0,0,0.2); } body[data-theme="light"] .nav-btn::before { background: linear-gradient(90deg, transparent, rgba(160,120,32,0.6), rgba(160,120,32,0.4), transparent); } /* Department label */ body[data-theme="light"] .sb-divider, body[data-theme="light"] .sb-section-label, body[data-theme="light"] .sb-dept-label { color: rgba(160,120,32,0.40) !important; border-color: rgba(160,120,32,0.12) !important; } /* Department buttons */ body[data-theme="light"] .dept-btn { color: rgba(160,120,32,0.60); } body[data-theme="light"] .dept-btn:hover { color: rgba(160,120,32,0.90); border-color: rgba(160,120,32,0.15); box-shadow: 0 1px 2px rgba(0,0,0,0.2); } body[data-theme="light"] .dept-btn.active { color: var(--gold-lt); text-shadow: 0 0 10px rgba(160,120,32,0.25); border-bottom-color: rgba(160,120,32,0.28); box-shadow: inset 0 1px 3px rgba(0,0,0,0.15); } body[data-theme="light"] .dept-btn::before { background: linear-gradient(90deg, transparent, rgba(160,120,32,0.5), transparent); } /* Sidebar footer */ body[data-theme="light"] .sb-footer { border-top: 1px solid rgba(160,120,32,0.15); box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); } /* Topbar — dark in light mode to match sidebar */ body[data-theme="light"] #topbar { background: linear-gradient(180deg, #0d1525 0%, var(--ink-deep) 100%); border-bottom: 1px solid rgba(160,120,32,0.18); box-shadow: 0 2px 12px rgba(0,0,0,0.3); } /* Bottom chat input bar — was dark with gold accent border. Now clean white with subtle border. */ body[data-theme="light"] .botbar, body[data-theme="light"] #chat-composer, body[data-theme="light"] .composer-wrap { background: var(--surface) !important; border-color: rgba(30, 58, 95, 0.15) !important; box-shadow: 0 -2px 8px rgba(30, 58, 95, 0.04) !important; } /* Main content area backgrounds — the circuit-board pattern was gold-tinted and reads muddy on light. Hide it in light mode. Actual class is chat-bg-overlay (confirmed via grep of DOM). */ body[data-theme="light"] #circuit-overlay, body[data-theme="light"] .circuit-bg, body[data-theme="light"] #main-circuit { display: none !important; } /* Light mode: light variant background, replace the dark ink wash with a light one so text stays readable. */ body[data-theme="light"] .chat-bg-overlay::before { background: url('JUSHILIGHT.webp') center center / cover no-repeat !important; opacity: 0.75 !important; filter: contrast(1.0) brightness(1.02) !important; } body[data-theme="light"] .chat-bg-overlay::after { /* Very subtle center wash — just enough to keep text readable against busy cloud pattern. Previous version was too heavy (opacity .55) and killed the sky. Now dialed way down so the image breathes. */ background: radial-gradient(ellipse 40% 35% at 50% 50%, rgba(245, 247, 250, 0.18) 0%, rgba(245, 247, 250, 0.03) 100%), linear-gradient(180deg, rgba(245, 247, 250, 0.04) 0%, rgba(245, 247, 250, 0.10) 100%) !important; } /* SVG circuit lines on top of the image — these are gold-stroked and read as muddy yellow on light. Hide them. */ body[data-theme="light"] .chat-bg-overlay svg { display: none !important; } /* SVG circuit lines on top of the image — these are gold-stroked and read as muddy yellow on light. Hide them. */ body[data-theme="light"] .chat-bg-overlay svg { display: none !important; } /* Chat messages area base */ body[data-theme="light"] #chat-msgs, body[data-theme="light"] .chat-messages { background: transparent; } /* Welcome / intro text in empty chat */ body[data-theme="light"] .chat-welcome, body[data-theme="light"] .chat-intro, body[data-theme="light"] .empty-chat-text { color: rgba(30, 58, 95, 0.75); } /* Input field */ body[data-theme="light"] #chat-input, body[data-theme="light"] .chat-composer-input { background: var(--surface); color: var(--smoke); border-color: rgba(30, 58, 95, 0.18); } body[data-theme="light"] #chat-input::placeholder, body[data-theme="light"] .chat-composer-input::placeholder { color: rgba(30, 58, 95, 0.40); } /* Watermark in the chat — tone it down */ body[data-theme="light"] .brand-watermark, body[data-theme="light"] #brand-mark { opacity: 0.08; filter: none; } /* AI response bubbles — heather gray card with navy text and cyan accent. Gives the chat its own visual language distinct from raw white cards: the heather gray base feels grounded and warm, navy text is authoritative, and the cyan left-edge accent signals "CACI" without shouting. */ body[data-theme="light"] .msg.ai .msg-bubble { background: linear-gradient(180deg, var(--ink4) 0%, var(--ink4) 100%); border: 1px solid rgba(15, 23, 42, 0.14); color: var(--smoke); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.6); position: relative; } /* Cyan left-edge accent — subtle vertical bar that marks this as an AI response, echoing the gold accent in dark mode but in a color that reads right on heather gray. */ body[data-theme="light"] .msg.ai .msg-bubble::before { background: linear-gradient(180deg, transparent 0%, rgba(8, 145, 178, 0.45) 20%, rgba(6, 182, 212, 0.65) 50%, rgba(8, 145, 178, 0.45) 80%, transparent 100% ) !important; opacity: 1 !important; width: 2px !important; top: 12px !important; bottom: 12px !important; left: 0 !important; right: auto !important; height: auto !important; } body[data-theme="light"] .msg.ai .msg-bubble p, body[data-theme="light"] .msg.ai .msg-bubble li { color: var(--smoke); } body[data-theme="light"] .msg.ai .msg-bubble h2, body[data-theme="light"] .msg.ai .msg-bubble h3 { color: var(--smoke2) !important; font-weight: 500; } body[data-theme="light"] .msg.ai .msg-bubble strong { color: var(--smoke) !important; font-weight: 600; } body[data-theme="light"] .msg.ai .msg-bubble em { color: var(--ink-deep) !important; } /* Code inline — subtle darker heather with navy text */ body[data-theme="light"] .msg.ai .msg-bubble code { background: rgba(15, 23, 42, 0.08); color: var(--smoke); border: 1px solid rgba(15, 23, 42, 0.10); } /* Code blocks — slightly deeper than inline, with cyan-tinted border */ body[data-theme="light"] .msg.ai .msg-bubble pre { background: rgba(15, 23, 42, 0.06); border: 1px solid rgba(8, 145, 178, 0.20); } body[data-theme="light"] .msg.ai .msg-bubble pre code { background: transparent; color: var(--smoke); border: none; } /* Links inside messages — cyan for that "technical AI" feel */ body[data-theme="light"] .msg.ai .msg-bubble a { color: var(--gold); text-decoration: underline; text-decoration-color: rgba(8, 145, 178, 0.35); text-underline-offset: 2px; } body[data-theme="light"] .msg.ai .msg-bubble a:hover { color: var(--gold); text-decoration-color: var(--gold); } /* User message bubbles — deeper navy tint, visually distinct from the heather gray AI bubble. Feels like "your side of the conversation." */ body[data-theme="light"] .msg.user .msg-bubble { background: linear-gradient(180deg, rgba(30, 58, 95, 0.12) 0%, rgba(30, 58, 95, 0.08) 100%); border: 1px solid rgba(30, 58, 95, 0.18); color: var(--smoke); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.3); } /* Message avatars (YOU / CACI circles) — heather gray base, navy text, cyan ring accent on the CACI avatar to tie it to the AI bubble style. */ body[data-theme="light"] .msg-av { background: linear-gradient(135deg, var(--ink4) 0%, var(--ink4) 100%); border: 1px solid rgba(15, 23, 42, 0.18); color: var(--smoke2); } body[data-theme="light"] .msg.ai .msg-av { border-color: rgba(8, 145, 178, 0.35); box-shadow: 0 0 0 2px rgba(8, 145, 178, 0.08); } /* Scope/source small text under messages */ body[data-theme="light"] .msg-scope, body[data-theme="light"] .msg-sources { color: rgba(30, 58, 95, 0.60); } /* Action buttons (Listen, Download, Save, Copy) */ body[data-theme="light"] .msg-action-btn { color: rgba(30, 58, 95, 0.65); border-color: rgba(30, 58, 95, 0.15); background: var(--surface); } body[data-theme="light"] .msg-action-btn:hover { color: var(--smoke2); border-color: rgba(30, 58, 95, 0.35); background: rgba(30, 58, 95, 0.04); } body[data-theme="light"] .spk-btn.playing { color: var(--smoke2) !important; border-color: rgba(30, 58, 95, 0.40) !important; background: rgba(30, 58, 95, 0.08) !important; } /* Top-bar dropdowns (COMPLIANCE ▼) and status pills (ONLINE, TIM KOSUGE) */ body[data-theme="light"] .tb-dept-btn, body[data-theme="light"] .tb-status, body[data-theme="light"] .tb-user, body[data-theme="light"] .topbar-pill { background: var(--surface); color: var(--smoke2); border-color: rgba(30, 58, 95, 0.15); } body[data-theme="light"] .tb-dept-btn:hover, body[data-theme="light"] .tb-user:hover { border-color: rgba(30, 58, 95, 0.30); background: rgba(30, 58, 95, 0.04); } /* "Switch Collection" button in the upper left */ body[data-theme="light"] #switch-collection-btn, body[data-theme="light"] .switch-collection-btn { background: var(--surface); color: var(--smoke2); border-color: rgba(30, 58, 95, 0.18); } /* Typing indicator dots — subtle steel blue on light */ body[data-theme="light"] .typing-dot { background: rgba(30, 58, 95, 0.55); } /* Theme toggle button itself */ body[data-theme="light"] .theme-toggle { background: var(--surface); color: var(--smoke3); border-color: rgba(30, 58, 95, 0.25); } body[data-theme="light"] .theme-toggle:hover { color: var(--smoke2); border-color: rgba(30, 58, 95, 0.50); background: rgba(30, 58, 95, 0.05); } /* Modals and overlays */ body[data-theme="light"] .modal-overlay, body[data-theme="light"] .overlay-backdrop { background: rgba(30, 58, 95, 0.35) !important; } body[data-theme="light"] .modal-card, body[data-theme="light"] .modal-content { background: var(--surface); border: 1px solid rgba(30, 58, 95, 0.12); color: var(--smoke); box-shadow: 0 24px 60px rgba(30, 58, 95, 0.25); } /* Input elements generally */ body[data-theme="light"] input[type="text"], body[data-theme="light"] input[type="email"], body[data-theme="light"] input[type="password"], body[data-theme="light"] input[type="search"], body[data-theme="light"] textarea, body[data-theme="light"] select { background: var(--surface); color: var(--smoke); border-color: rgba(30, 58, 95, 0.18); } body[data-theme="light"] input::placeholder, body[data-theme="light"] textarea::placeholder { color: rgba(30, 58, 95, 0.40); } body[data-theme="light"] input:focus, body[data-theme="light"] textarea:focus, body[data-theme="light"] select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(59, 111, 168, 0.18); outline: none; } /* File cards in the library */ body[data-theme="light"] .file-card, body[data-theme="light"] .doc-card, body[data-theme="light"] .collection-card { background: var(--surface); border-color: rgba(30, 58, 95, 0.12); color: var(--smoke); box-shadow: 0 1px 3px rgba(30, 58, 95, 0.05); } body[data-theme="light"] .file-card:hover, body[data-theme="light"] .doc-card:hover { border-color: rgba(30, 58, 95, 0.25); box-shadow: 0 4px 12px rgba(30, 58, 95, 0.08); } /* Tour spotlight overlay */ body[data-theme="light"] .tour-backdrop, body[data-theme="light"] #tour-backdrop { background: rgba(30, 58, 95, 0.40); } /* Buttons generally */ body[data-theme="light"] .lbtn, body[data-theme="light"] .btn-secondary { background: var(--surface); color: var(--smoke2); border: 1px solid rgba(30, 58, 95, 0.25); } body[data-theme="light"] .lbtn:hover, body[data-theme="light"] .btn-secondary:hover { background: rgba(30, 58, 95, 0.06); border-color: rgba(30, 58, 95, 0.40); } body[data-theme="light"] .lbtn:disabled { color: rgba(30, 58, 95, 0.35); background: var(--surface3); cursor: not-allowed; } /* Section titles / section headers */ body[data-theme="light"] .section-title, body[data-theme="light"] .asec-title, body[data-theme="light"] .asec-sub-title { color: rgba(30, 58, 95, 0.70); } /* Card/panel bases — common pattern */ body[data-theme="light"] .scard, body[data-theme="light"] .stat-card, body[data-theme="light"] .info-card { background: var(--surface); border: 1px solid rgba(20,50,100,0.18); border-top-color: rgba(20,50,100,0.28); box-shadow: 0 3px 12px rgba(20,50,100,0.16), 0 1px 3px rgba(20,50,100,0.10), inset 0 1px 0 rgba(255,255,255,1.0); border-top-color: rgba(20,58,95,0.28); box-shadow: 0 2px 6px rgba(30,58,95,0.09), inset 0 1px 0 rgba(255,255,255,0.90); } body[data-theme="light"] .scard-label, body[data-theme="light"] .stat-label { color: rgba(30,58,95,0.60); } body[data-theme="light"] .scard-val, body[data-theme="light"] .stat-val { color: var(--ink-deep); } /* Admin cards — acard was missing light mode override entirely */ body[data-theme="light"] .acard { background: var(--surface) !important; border: 1px solid rgba(20,50,100,0.18) !important; box-shadow: 0 3px 12px rgba(20,50,100,0.16), 0 1px 3px rgba(20,50,100,0.10), inset 0 1px 0 rgba(255,255,255,1.0) !important; border-top-color: rgba(30,58,95,0.28) !important; border-bottom-color: rgba(30,58,95,0.12) !important; box-shadow: 0 2px 8px rgba(30,58,95,0.10), 0 1px 2px rgba(30,58,95,0.06), inset 0 1px 0 rgba(255,255,255,0.90) !important; } body[data-theme="light"] .acard::before { background: linear-gradient(90deg, transparent 5%, rgba(30,58,95,0.20) 25%, rgba(60,100,160,0.35) 50%, rgba(30,58,95,0.20) 75%, transparent 95%) !important; } body[data-theme="light"] .acard::after { background: linear-gradient(145deg, rgba(60,100,160,0.04) 0%, transparent 60%) !important; } body[data-theme="light"] .acard-title { color: var(--ink-deep) !important; } body[data-theme="light"] .acard-sub { color: rgba(30,58,95,0.55) !important; } body[data-theme="light"] .ainput { background: linear-gradient(180deg, var(--surface) 0%, var(--surface2) 100%) !important; border-color: rgba(30,58,95,0.22) !important; color: var(--ink-deep) !important; } body[data-theme="light"] .asave { background: linear-gradient(160deg, var(--gold) 0%, var(--smoke2) 100%) !important; border-color: rgba(30,58,95,0.50) !important; color: var(--surface) !important; } body[data-theme="light"] .afb { color: var(--gold) !important; } /* Code blocks / pre elements anywhere */ body[data-theme="light"] pre, body[data-theme="light"] code { background: var(--surface3); color: var(--smoke); } /* Tooltips and popovers */ body[data-theme="light"] .tooltip, body[data-theme="light"] .popover { background: var(--smoke); color: var(--surface); } /* SKIP LINK (audit P23) -- visually hidden until it takes keyboard focus. Not `display:none` and not `visibility:hidden`: both remove the element from the focus order entirely, which would make the link unreachable and therefore useless. Positioning it off-canvas keeps it focusable, which is the whole point. On focus it slides into the top-left over everything. */ .skip-to-content { position: absolute; top: -100px; left: 12px; z-index: 100000; padding: 10px 16px; border-radius: 0 0 6px 6px; background: var(--ink2); color: var(--gold); border: 1px solid var(--gold); font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; transition: top 0.15s ease-in; } .skip-to-content:focus { top: 0; outline: 2px solid var(--gold); outline-offset: 2px; }