/* ============================================================================ QBank — THEME FOUNDATION · 8 palettes (4 skins × light/dark) ---------------------------------------------------------------------------- Two orthogonal axes: Axis 1 — SKIN: body class .qb-theme--{clinical|slate|warm|studio} sets identity (accent, fonts, radius) + LIGHT surfaces. Axis 2 — MODE: overrides surfaces to dark. No data-theme (or ="light") = light. Reuses the app's existing data-theme attribute so the current toggle keeps working. Light values match the Claude-Design handoff exactly. The dark values are NEW (designed here) — first pass, verify in the harness and iterate. Semantic ok/bad/warn are theme-independent (on .qb) with dark soft tints. --onAccent = text/icon color that sits ON an accent fill (flips for studio-dark). ========================================================================== */ .qb { --ok: #3F7D5B; --okSoft: #EAF1EC; --bad: #B0524A; --badSoft: #F5E9E7; --warn: #B08A3E; --warnSoft:#F4EEDF; --onAccent: #ffffff; --onInk: #ffffff; /* text/icon color ON an --ink fill (flips in dark) */ --mono: 'JetBrains Mono', monospace; font-family: var(--sans); color: var(--body); } /* Dark-mode semantic tints + slightly brighter bases for contrast on dark. */ [data-theme="dark"] .qb { --ok: #57A47B; --okSoft: #17281E; --bad: #CB6A60; --badSoft: #2E1815; --warn: #CBA257; --warnSoft:#2A2312; --onInk: var(--bg); /* --ink is near-white in dark → dark text on it */ } /* ---- 1 · Clinical Paper — botanical green, Source Serif ------------------ */ .qb-theme--clinical { --bg:#FAFAF7; --card:#FFFFFF; --side:#F4F3ED; --inset:#F1EFE9; --bd:#E7E5DD; --ink:#1B1B18; --body:#56544C; --muted:#928F85; --accent:#2F6F52; --soft:#E8F0EA; /* body font is shared across ALL themes (only --head varies per theme) so body text overlaps perfectly when switching skins. */ --head:'Source Serif 4', serif; --sans:'Hanken Grotesk', sans-serif; --r:8px; } [data-theme="dark"] .qb-theme--clinical { --bg:#12130E; --card:#1B1D16; --side:#17190F; --inset:#23261C; --bd:#313327; --ink:#EFEEE6; --body:#B6B4A6; --muted:#83826E; --accent:#63AE82; --soft:#1F2E22; } /* ---- 2 · Modern Slate — light pastel blue, Newsreader ------------------- */ .qb-theme--slate { --bg:#F1F6FC; --card:#FFFFFF; --side:#F8FBFE; --inset:#EDF4FC; --bd:#E1EBF6; --ink:#2A3645; --body:#586679; --muted:#9BA8BB; --accent:#76A6E6; --soft:#EBF3FD; --head:'Newsreader', serif; --sans:'Hanken Grotesk', sans-serif; --r:13px; } [data-theme="dark"] .qb-theme--slate { --bg:#0F141B; --card:#172029; --side:#131A22; --inset:#1D2732; --bd:#2A3542; --ink:#E7EDF4; --body:#A7B4C4; --muted:#74839A; --accent:#7FB0EE; --soft:#1A2735; } /* ---- 3 · Warm Focus — terracotta clay, Spectral ------------------------- */ .qb-theme--warm { --bg:#F4EEE6; --card:#FFFDFB; --side:#EFE7DB; --inset:#F0E8DC; --bd:#E7DECF; --ink:#2A2420; --body:#5C5248; --muted:#9C9080; --accent:#B25E3A; --soft:#F3E6DD; --head:'Spectral', serif; --sans:'Hanken Grotesk', sans-serif; --r:15px; } [data-theme="dark"] .qb-theme--warm { --bg:#161009; --card:#201812; --side:#1B140D; --inset:#271E15; --bd:#362A1F; --ink:#F1E9E0; --body:#C0B3A6; --muted:#94826F; --accent:#D07A4E; --soft:#2E2015; } /* ---- 4 · Studio Gray — neutral grayscale, plain sans -------------------- */ .qb-theme--studio { --bg:#FBFAF8; --card:#FFFFFF; --side:#F4F3F0; --inset:#F1F0EC; --bd:#E5E3DD; --ink:#1C1B19; --body:#57554F; --muted:#94918A; --accent:#2B2A27; --soft:#ECEBE6; --head:'Hanken Grotesk', sans-serif; --sans:'Hanken Grotesk', sans-serif; --r:12px; } [data-theme="dark"] .qb-theme--studio { --bg:#131211; --card:#1C1B19; --side:#171614; --inset:#232220; --bd:#33312D; --ink:#EEEDE9; --body:#B4B2AC; --muted:#838079; --accent:#E7E5DF; --soft:#262421; --onAccent:#1C1B19; /* accent is near-white in dark → dark text on it */ } /* ---------------------------------------------------------------------------- SHARED PRIMITIVES (mirror the handoff, but read --onAccent for on-accent text) ---------------------------------------------------------------------------- */ .qb-screen { background: var(--bg); border: 1px solid var(--bd); border-radius: 16px; box-shadow: 0 1px 2px rgba(20,20,20,.05), 0 18px 44px rgba(20,20,20,.07); overflow: hidden; } .qb-h { font-family: var(--head); color: var(--ink); font-weight: 600; } .qb-mono { font-family: var(--mono); } .qb-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .qb-btn-accent { background: var(--accent); color: var(--onAccent); border: none; padding: 12px 16px; border-radius: 10px; font-weight: 600; font-size: 13.5px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 9px; } .qb-btn-ghost { background: var(--card); border: 1px solid var(--bd); color: var(--ink); padding: 12px 16px; border-radius: 10px; font-weight: 600; font-size: 13.5px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 9px; } .qb-meter { height: 6px; border-radius: 6px; background: rgba(128,128,128,.22); overflow: hidden; } .qb-meter > span { display: block; height: 100%; background: var(--accent); } .qb-meter > span.is-good { background: var(--ok); } .qb-meter > span.is-mid { background: var(--warn); } .qb-meter > span.is-low { background: var(--bad); } /* ============================================================================ LEGACY-TOKEN BRIDGE ---------------------------------------------------------------------------- Maps the app's original CSS variables to the new theme values so any screen NOT yet re-classed to .qb-* components still follows the active skin and gets flattened toward the redesign. Scoped to the app root (which carries .qb .qb-theme--). Screens re-classed to .qb-* ignore these entirely. Remove once every screen is converted. ========================================================================== */ /* Paint only the app base with the active theme bg so no legacy navy `--bg-base` shows through transparent areas (topbar, views-wrapper padding, exam surround). */ #main-app-container.qb { background: var(--bg); } /* Token bridge — also applied to the modals, which live OUTSIDE the app container (applySkin stamps `qb qb-theme--{skin}` on them) so their legacy components (.modal-card/.btn/.modal-input) follow the active skin too. */ #main-app-container.qb, #add-profile-modal.qb, #edit-profile-modal.qb, #mock-intro-modal.qb, #image-zoom-modal.qb { --bg-base: var(--bg); --bg-surface: var(--card); --bg-surface-hover: var(--inset); --border-color: var(--bd); --border-color-glow: var(--accent); --primary: var(--accent); --primary-hover: var(--accent); --primary-glow: var(--soft); --secondary: var(--accent); --secondary-hover: var(--accent); --accent-amber: var(--warn); --accent-danger: var(--bad); --accent-success: var(--ok); --text-primary: var(--ink); --text-secondary: var(--body); --text-muted: var(--muted); --font-heading: var(--head); --font-body: var(--sans); --bg-sidebar: var(--side); --bg-header: var(--bg); --bg-group-header: var(--inset); --bg-hover-item: var(--inset); --bg-mode-card-hover: var(--inset); --bg-image-placeholder: var(--inset); --bg-progress-track: var(--inset); --bg-btn-secondary: var(--card); --bg-btn-secondary-hover: var(--inset); --bg-modal: var(--card); --border-modal: var(--bd); --bg-modal-input: var(--inset); --gradient-stat-card: var(--soft); --text-stat-card: var(--ink); --shadow-glow: 0 0 0 rgba(0,0,0,0); }