/* ============================================================================ OJUDS — Shared UI Theme (theme.css) ---------------------------------------------------------------------------- ONE file, linked by EVERY page. It does two things: 1. Declares design tokens (CSS custom properties) for BOTH looks: - :root -> "classic" (the current look) [DEFAULT] - :root[data-theme="dark"] -> "dark" instrument look 2. Applies the DARK skin to generic/base elements and common wrappers, scoped ENTIRELY under [data-theme="dark"]. >>> KEY GUARANTEE <<< In "classic" mode (no data-theme, or data-theme="classic") this file adds NO visible rules. Linking it changes NOTHING until a user switches to dark. That is what makes adoption zero-risk and instantly reversible. Runtime switching is driven by the `data-theme` attribute on , set by /js/theme-switch.js (and a no-flash inline snippet in ). ============================================================================ */ /* --------------------------------------------------------------------------- 1. TOKENS --------------------------------------------------------------------------- */ :root { /* Type (kept identical to the app's current stack so classic is unchanged) */ --uds-font-ui: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; --uds-font-mono: 'Consolas', 'SF Mono', 'Ubuntu Mono', Menlo, 'Courier New', monospace; /* Geometry (shared by both themes) */ --uds-r: 10px; /* card / container radius */ --uds-r-sm: 7px; /* control radius */ --uds-r-xs: 5px; /* chip / small radius */ /* ---- CLASSIC palette = the current look (inert unless a token is used) ---- */ --uds-bg: #f0f0f0; --uds-surface-1: #f8f9fa; --uds-surface-2: #ffffff; --uds-surface-3: #e9ecef; --uds-line: #dee2e6; --uds-line-2: #ced4da; --uds-text-hi: #333333; --uds-text: #495057; --uds-text-dim: #6c757d; --uds-accent: #007bff; --uds-accent-ink: #ffffff; --uds-accent-soft: #e7f1ff; --uds-header-bg: #2c3e50; --uds-header-line: #233140; --uds-header-text: #ffffff; --uds-header-dim: #bdc3c7; --uds-ok: #28a745; --uds-warn: #ffc107; --uds-danger: #dc3545; --uds-info: #17a2b8; --uds-primary-bg: #007bff; --uds-primary-ink: #ffffff; --uds-focus: rgba(0, 123, 255, .25); --uds-shadow: 0 2px 4px rgba(0, 0, 0, .10); } /* ---- DARK palette = the "instrument cluster" look ------------------------- */ :root[data-theme="dark"] { --uds-bg: #0e1217; --uds-surface-1: #161b22; --uds-surface-2: #1c232c; --uds-surface-3: #232c37; --uds-line: #28313c; --uds-line-2: #37424f; --uds-text-hi: #eaf0f6; --uds-text: #a7b4c2; --uds-text-dim: #8392a3; --uds-accent: #e0a458; /* warm amber / copper — the single accent */ --uds-accent-ink: #20160a; /* dark ink for text on the amber */ --uds-accent-soft: #2a2114; --uds-header-bg: #12171e; --uds-header-line: #28313c; --uds-header-text: #eaf0f6; --uds-header-dim: #8999aa; --uds-ok: #4fbf83; --uds-warn: #e6b34c; --uds-danger: #e5626d; --uds-info: #5aa9e6; --uds-primary-bg: #e0a458; --uds-primary-ink: #20160a; --uds-focus: rgba(224, 164, 88, .30); --uds-shadow: 0 8px 24px -12px rgba(0, 0, 0, .70); } /* ---- GENERATED TOKENISATION TIER (D2, 2026-07-29) ----------- Tools/ThemeTokeniser/apply.py emitted these. Every CLASSIC value is exactly the literal it replaced, so classic cannot move. Every DARK value is derived by derive_dark(), whose bands are fitted to the hand-authored palette above (verified by `apply.py --calibrate`). The --uds-x- prefix marks the generated tier; D3 folds these into the semantic set. Do not hand-edit: re-run apply.py --emit-tokens. */ :root { --uds-x-ln-0f3460: #0f3460; /* line */ --uds-x-ln-2a2a2a: #2a2a2a; /* line */ --uds-x-ln-2c3e50: #2c3e50; /* line */ --uds-x-ln-333333: #333333; /* line */ --uds-x-ln-3498db: #3498db; /* line */ --uds-x-ln-444444: #444444; /* line */ --uds-x-ln-495057: #495057; /* line */ --uds-x-ln-6c757d: #6c757d; /* line */ --uds-x-ln-bdc3c7: #bdc3c7; /* line */ --uds-x-ln-cccccc: #cccccc; /* line */ --uds-x-ln-dddddd: #dddddd; /* line */ --uds-x-ln-e74c3c: #e74c3c; /* line */ --uds-x-ln-e9ecef: #e9ecef; /* line */ --uds-x-ln-eeeeee: #eeeeee; /* line */ --uds-x-ln-ffffff: #ffffff; /* line */ --uds-x-bg-218838: #218838; /* surface */ --uds-x-bg-27ae60: #27ae60; /* surface */ --uds-x-bg-3498db: #3498db; /* surface */ --uds-x-bg-6c757d: #6c757d; /* surface */ --uds-x-bg-d4edda: #d4edda; /* surface */ --uds-x-bg-dee2e6: #dee2e6; /* surface */ --uds-x-bg-e74c3c: #e74c3c; /* surface */ --uds-x-bg-f5f5f5: #f5f5f5; /* surface */ --uds-x-bg-f8d7da: #f8d7da; /* surface */ --uds-x-bg-fff3cd: #fff3cd; /* surface */ --uds-x-fg-155724: #155724; /* text */ --uds-x-fg-212529: #212529; /* text */ --uds-x-fg-2c3e50: #2c3e50; /* text */ --uds-x-fg-555555: #555555; /* text */ --uds-x-fg-666666: #666666; /* text */ --uds-x-fg-721c24: #721c24; /* text */ --uds-x-fg-856404: #856404; /* text */ --uds-x-fg-888888: #888888; /* text */ --uds-x-fg-e74c3c: #e74c3c; /* text */ --uds-x-bg-c82333: #c82333; /* surface */ --uds-x-ln-555555: #555555; /* line */ --uds-x-bg-00ff88: #00ff88; /* surface */ --uds-x-bg-90ee90: #90ee90; /* surface */ --uds-x-bg-bbdefb: #bbdefb; /* surface */ --uds-x-bg-c3e6cb: #c3e6cb; /* surface */ --uds-x-bg-c8e6c9: #c8e6c9; /* surface */ --uds-x-bg-cce5ff: #cce5ff; /* surface */ --uds-x-bg-cfe2ff: #cfe2ff; /* surface */ --uds-x-bg-d0e0fa: #d0e0fa; /* surface */ --uds-x-bg-d1ecf1: #d1ecf1; /* surface */ --uds-x-bg-dcf8c6: #dcf8c6; /* surface */ --uds-x-bg-e0e0e0: #e0e0e0; /* surface */ --uds-x-bg-e2e3e5: #e2e3e5; /* surface */ --uds-x-bg-e3f2fd: #e3f2fd; /* surface */ --uds-x-bg-e5ddd5: #e5ddd5; /* surface */ --uds-x-bg-e7f3ff: #e7f3ff; /* surface */ --uds-x-bg-e8e8e8: #e8e8e8; /* surface */ --uds-x-bg-e8f0fe: #e8f0fe; /* surface */ --uds-x-bg-e8f5e9: #e8f5e9; /* surface */ --uds-x-bg-e8f8f0: #e8f8f0; /* surface */ --uds-x-bg-e9d8fd: #e9d8fd; /* surface */ --uds-x-bg-ecf0f1: #ecf0f1; /* surface */ --uds-x-bg-eeeeff: #eeeeff; /* surface */ --uds-x-bg-eef2f7: #eef2f7; /* surface */ --uds-x-bg-f0f2f5: #f0f2f5; /* surface */ --uds-x-bg-f0f4f8: #f0f4f8; /* surface */ --uds-x-bg-f0f4ff: #f0f4ff; /* surface */ --uds-x-bg-f0f7ff: #f0f7ff; /* surface */ --uds-x-bg-f0f8ff: #f0f8ff; /* surface */ --uds-x-bg-f1f1f1: #f1f1f1; /* surface */ --uds-x-bg-f5c6cb: #f5c6cb; /* surface */ --uds-x-bg-f7f9fc: #f7f9fc; /* surface */ --uds-x-bg-fafbfc: #fafbfc; /* surface */ --uds-x-bg-fce4ec: #fce4ec; /* surface */ --uds-x-bg-fdf2f2: #fdf2f2; /* surface */ --uds-x-bg-fef8e8: #fef8e8; /* surface */ --uds-x-bg-fef9e7: #fef9e7; /* surface */ --uds-x-bg-fefefe: #fefefe; /* surface */ --uds-x-bg-ffca2c: #ffca2c; /* surface */ --uds-x-bg-ffe680: #ffe680; /* surface */ --uds-x-bg-ffe69c: #ffe69c; /* surface */ --uds-x-bg-ffe8a1: #ffe8a1; /* surface */ --uds-x-bg-ffeeba: #ffeeba; /* surface */ --uds-x-bg-ffeeee: #ffeeee; /* surface */ /* D4 2026-07-31 — two literals crossed the token frequency floor (8 uses per hex+family) once blind spot 5 made 126 previously-invisible .style assignments countable: #2ecc71 went 7->8 and #c3e6cb went 6->8. The floor was undercounting BECAUSE of the blind spot, so these are a corrected count, not new policy. apply.py never writes theme.css (NEVER_TOUCH), so the pairs it planned have to be declared here by hand or every reference dangles. */ --uds-x-bg-2ecc71: #2ecc71; /* surface */ --uds-x-ln-c3e6cb: #c3e6cb; /* line */ /* D4 2026-07-31 — series ink for js/vaps-editor.js. var() does not resolve on a canvas, so these are read at DRAW TIME through vapsThemeColor(token, fallback); the classic value below IS the literal they replace, so the guarantee holds unchanged. TEXT family on purpose: a data curve must stay vivid. The line family would send #fd7e14 to #5a3617 (1.49:1) — a curve you cannot see. Mapped to generated tokens, NOT to --uds-accent/--uds-ok, because those dark values are #e0a458 and #4fbf83 — 1.06:1 against each other, which would collapse two of the three series into the same brightness. */ --uds-x-fg-007bff: #007bff; /* text */ --uds-x-fg-0056b3: #0056b3; /* text */ /* D5 2026-08-01 — R8, inks stranded by a moving background. Each of these is a rare literal that scan.py left as "one-off literal" because the frequency floor returns BEFORE R7 is consulted, while the background of the same block HAD been tokenised. The background then followed the theme into dark and the ink stayed put: 12 of them were hard failures in dark while reading 6:1–9:1 in classic. Found by Tools/ThemeTokeniser/pairing.py. Classic values are the literals they replace, so the guarantee holds unchanged. */ --uds-x-fg-004085: #004085; /* text */ --uds-x-fg-0a3a72: #0a3a72; /* text */ --uds-x-fg-0c5460: #0c5460; /* text */ --uds-x-fg-1976d2: #1976d2; /* text */ --uds-x-fg-2e7d32: #2e7d32; /* text */ --uds-x-fg-34495e: #34495e; /* text */ --uds-x-fg-383d41: #383d41; /* text */ --uds-x-fg-553c9a: #553c9a; /* text */ --uds-x-fg-883322: #883322; /* text */ --uds-x-fg-c62828: #c62828; /* text */ --uds-x-fg-cc3333: #cc3333; /* text */ } :root[data-theme="dark"] { --uds-x-ln-0f3460: #264262; /* line */ --uds-x-ln-2a2a2a: #464646; /* line */ --uds-x-ln-2c3e50: #38444f; /* line */ --uds-x-ln-333333: #454545; /* line */ --uds-x-ln-3498db: #213e51; /* line */ --uds-x-ln-444444: #434343; /* line */ --uds-x-ln-495057: #3d4144; /* line */ --uds-x-ln-6c757d: #393c3e; /* line */ --uds-x-ln-bdc3c7: #2e3133; /* line */ --uds-x-ln-cccccc: #2f2f2f; /* line */ --uds-x-ln-dddddd: #2c2c2c; /* line */ --uds-x-ln-e74c3c: #51221d; /* line */ --uds-x-ln-e9ecef: #262a2e; /* line */ --uds-x-ln-eeeeee: #2a2a2a; /* line */ --uds-x-ln-ffffff: #282828; /* line */ --uds-x-bg-218838: #172e1c; /* surface */ --uds-x-bg-27ae60: #152b1e; /* surface */ --uds-x-bg-3498db: #111f27; /* surface */ --uds-x-bg-6c757d: #1d1f20; /* surface */ --uds-x-bg-d4edda: #0e1610; /* surface */ --uds-x-bg-dee2e6: #101213; /* surface */ --uds-x-bg-e74c3c: #27120f; /* surface */ --uds-x-bg-f5f5f5: #0f0f0f; /* surface */ --uds-x-bg-f8d7da: #170a0c; /* surface */ --uds-x-bg-fff3cd: #1a1608; /* surface */ --uds-x-fg-155724: #dff5e4; /* text */ --uds-x-fg-212529: #f1f2f3; /* text */ --uds-x-fg-2c3e50: #d1dae3; /* text */ --uds-x-fg-555555: #adadad; /* text */ --uds-x-fg-666666: #8c8c8c; /* text */ --uds-x-fg-721c24: #e5acb2; /* text */ --uds-x-fg-856404: #f5e1a6; /* text */ --uds-x-fg-888888: #8a8a8a; /* text */ --uds-x-fg-e74c3c: #de665a; /* text */ --uds-x-bg-c82333: #2a1315; /* surface */ --uds-x-ln-555555: #404040; /* line */ --uds-x-bg-00ff88: #0d2d1e; /* surface */ --uds-x-bg-90ee90: #0d1e0d; /* surface */ --uds-x-bg-bbdefb: #09131b; /* surface */ --uds-x-bg-c3e6cb: #0f1711; /* surface */ --uds-x-bg-c8e6c9: #0f170f; /* surface */ --uds-x-bg-cce5ff: #08111a; /* surface */ --uds-x-bg-cfe2ff: #080f1a; /* surface */ --uds-x-bg-d0e0fa: #0a0f19; /* surface */ --uds-x-bg-d1ecf1: #0c1517; /* surface */ --uds-x-bg-dcf8c6: #111a0a; /* surface */ --uds-x-bg-e0e0e0: #121212; /* surface */ --uds-x-bg-e2e3e5: #111112; /* surface */ --uds-x-bg-e3f2fd: #081117; /* surface */ --uds-x-bg-e5ddd5: #141210; /* surface */ --uds-x-bg-e7f3ff: #070f18; /* surface */ --uds-x-bg-e8e8e8: #111111; /* surface */ --uds-x-bg-e8f0fe: #080d17; /* surface */ --uds-x-bg-e8f5e9: #0d130d; /* surface */ --uds-x-bg-e8f8f0: #0b1410; /* surface */ --uds-x-bg-e9d8fd: #100819; /* surface */ --uds-x-bg-ecf0f1: #0f1111; /* surface */ --uds-x-bg-eeeeff: #070717; /* surface */ --uds-x-bg-eef2f7: #0c0f13; /* surface */ --uds-x-bg-f0f2f5: #0e0f11; /* surface */ --uds-x-bg-f0f4f8: #0c0f12; /* surface */ --uds-x-bg-f0f4ff: #070b17; /* surface */ --uds-x-bg-f0f7ff: #070e17; /* surface */ --uds-x-bg-f0f8ff: #070f17; /* surface */ --uds-x-bg-f1f1f1: #101010; /* surface */ --uds-x-bg-f5c6cb: #190b0d; /* surface */ --uds-x-bg-f7f9fc: #0b0e12; /* surface */ --uds-x-bg-fafbfc: #0d0f10; /* surface */ --uds-x-bg-fce4ec: #17090e; /* surface */ --uds-x-bg-fdf2f2: #150909; /* surface */ --uds-x-bg-fef8e8: #171308; /* surface */ --uds-x-bg-fef9e7: #171408; /* surface */ --uds-x-bg-fefefe: #0e0e0e; /* surface */ --uds-x-bg-ffca2c: #29220c; /* surface */ --uds-x-bg-ffe680: #221d0a; /* surface */ --uds-x-bg-ffe69c: #1f1909; /* surface */ --uds-x-bg-ffe8a1: #1e1909; /* surface */ --uds-x-bg-ffeeba: #1c1708; /* surface */ --uds-x-bg-ffeeee: #170707; /* surface */ /* D4 2026-07-31 — frequency-floor pairs; see the classic block. Both derived by apply.py's derive_dark(), not hand-picked. */ --uds-x-bg-2ecc71: #13281c; /* surface */ --uds-x-ln-c3e6cb: #223928; /* line */ /* D4 2026-07-31 — see the classic block. Derived by apply.py's derive_dark() on the text family, which lifts until 4.5:1 against --uds-surface-2. #007bff read 3.98:1 on the dark canvas and #0056b3 read 2.25:1 — the hover marker was all but invisible. These land at 4.56:1 and 5.86:1. */ --uds-x-fg-007bff: #2f8bee; /* text */ --uds-x-fg-0056b3: #57a1f1; /* text */ /* D5 2026-08-01 — see the classic block. derive_dark() on the text family, which lifts each value until it clears 4.5:1 against --uds-surface-2. The backgrounds these sit on are darker still, so every pair clears the floor by more than that lift guarantees. */ --uds-x-fg-004085: #aad0f8; /* text */ --uds-x-fg-0a3a72: #c0d8f4; /* text */ --uds-x-fg-0c5460: #dcf4f8; /* text */ --uds-x-fg-1976d2: #438fda; /* text */ --uds-x-fg-2e7d32: #8ccd8f; /* text */ --uds-x-fg-34495e: #b6c5d3; /* text */ --uds-x-fg-383d41: #dbdddf; /* text */ --uds-x-fg-553c9a: #9381c5; /* text */ --uds-x-fg-883322: #d79183; /* text */ --uds-x-fg-c62828: #d66b6b; /* text */ --uds-x-fg-cc3333: #d06d6d; /* text */ } /* =========================================================================== 1b. HEADER LAYOUT FIX (both themes) The header overflows when dev-role elements (Admin, Download Agent, user-info) are injected. These rules shrink/wrap items to keep it single-line on wide screens and wrapping gracefully on narrow ones. =========================================================================== */ .header-info { flex-wrap: wrap !important; gap: 8px !important; justify-content: flex-end; } .header-info .btn, .header-nav .btn { padding: 4px 8px !important; font-size: 11px !important; white-space: nowrap; } .user-info { font-size: 12px !important; gap: 6px !important; } .header-title, .header h1 { font-size: 15px !important; white-space: nowrap; } .version-display { font-size: 10px !important; } /* =========================================================================== 2. DARK SKIN — everything below is scoped to [data-theme="dark"] only. These rules give ANY page a coherent dark base. They use !important on color/background/border because they must override page-level inline styles and Bootstrap defaults. Classic mode is never touched. =========================================================================== */ /* ---- Ground + typography ------------------------------------------------- */ :root[data-theme="dark"] body { background: var(--uds-bg) !important; color: var(--uds-text) !important; font-family: var(--uds-font-ui); } :root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] h3, :root[data-theme="dark"] h4, :root[data-theme="dark"] h5, :root[data-theme="dark"] h6 { color: var(--uds-text-hi) !important; } :root[data-theme="dark"] a { color: var(--uds-accent); } :root[data-theme="dark"] hr { border-color: var(--uds-line) !important; } :root[data-theme="dark"] ::selection { background: var(--uds-accent-soft); color: var(--uds-text-hi); } :root[data-theme="dark"] small, :root[data-theme="dark"] .text-muted { color: var(--uds-text-dim) !important; } /* ---- Form controls ------------------------------------------------------- */ :root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea, :root[data-theme="dark"] .form-control { background: var(--uds-surface-2) !important; color: var(--uds-text-hi) !important; border: 1px solid var(--uds-line-2) !important; border-radius: var(--uds-r-sm); } :root[data-theme="dark"] input::placeholder, :root[data-theme="dark"] textarea::placeholder { color: var(--uds-text-dim) !important; } :root[data-theme="dark"] input:focus, :root[data-theme="dark"] select:focus, :root[data-theme="dark"] textarea:focus, :root[data-theme="dark"] .form-control:focus { border-color: var(--uds-accent) !important; box-shadow: 0 0 0 3px var(--uds-focus) !important; outline: none; } :root[data-theme="dark"] label { color: var(--uds-text-dim) !important; } /* Native dropdown arrow recolor for