/* ============================================================ TALZA — design tokens + theme system ("Quiet Professionalism"). Single source of truth for colour. Loaded LAST in on every page so these values win over each stylesheet's own :root block (same specificity, later cascade wins). [data-theme="dark"] on always wins (higher specificity); the prefers-color-scheme block applies only when no explicit choice is stored. Identity: Talza plum as the one brand colour, refined into an accessible scale; warm toned-down neutrals; blue reserved for verified/success meaning only. Every colour has a functional job. Two layers: 1. Semantic tokens (--background-primary, --text-muted, …) 2. Legacy aliases (--aubergine, --bone, --periwinkle, --glass, …) mapped onto the semantic layer so existing stylesheets follow. ============================================================ */ :root { color-scheme: light; /* ---- 1. Semantic tokens — LIGHT ---- */ --background-primary: #F6F4F0; --background-secondary: #EFECE6; --surface-primary: #FFFFFF; --surface-elevated: #FFFFFF; --surface-interactive: #F1EEE8; --surface-sunk: #EDEAE3; --text-primary: #241F2D; --text-secondary: #423C50; --text-muted: #554F63; --text-placeholder: #655F73; --text-inverse: #F7F5FA; --border-default: #DFDACF; --border-strong: #B7B0A3; --border-focus: #5C3B9E; --action-primary: #5C3B9E; --action-primary-hover: #4C3184; --action-primary-ink: #FFFFFF; --action-soft: rgba(92, 59, 158, 0.09); --action-secondary: transparent; --action-secondary-ink: #5C3B9E; --status-success: #216A94; --status-success-soft: rgba(33, 106, 148, 0.12); --status-warning: #8A5B06; --status-warning-soft: rgba(138, 91, 6, 0.10); --status-error: #B3261E; --status-error-soft: rgba(179, 38, 30, 0.08); --status-info: #31608F; --status-info-soft: rgba(49, 96, 143, 0.09); --focus-ring: #5C3B9E; --overlay: rgba(36, 31, 45, 0.50); --shadow-sm: 0 2px 8px rgba(36, 31, 45, 0.08); --shadow-md: 0 10px 30px rgba(36, 31, 45, 0.14); /* Ink panel — the recurring dark plum-charcoal surface (topbar, dark scenes, score chips). Stays dark in both themes. */ --surface-ink: #2B2138; --text-on-ink: #F3EFF9; --text-on-ink-muted: rgba(243, 239, 249, 0.74); --border-on-ink: rgba(243, 239, 249, 0.16); --accent-on-ink: #C9B4EF; /* Success/verified green legible on the always-dark ink surface. The light theme's --status-success (#1E7A4C) is too dark to read there. */ --status-success-on-ink: #5BC58E; /* ---- Shape scale (theme-independent) ---- */ --radius-sm: 6px; /* inputs, compact controls */ --radius-md: 10px; /* dropdown menus, small panels */ --radius-lg: 14px; /* cards, modals */ --radius-pill: 999px; /* tags, badges, compact statuses only */ /* ---- 2. Legacy aliases — LIGHT ---- */ --void: var(--background-primary); --void-2: var(--background-secondary); --paper: var(--surface-primary); --aubergine: var(--text-primary); --aubergine-2: var(--text-secondary); --aubergine-3: var(--text-muted); --bone: #FFFFFF; --bone-2: rgba(36, 31, 45, 0.08); --bone-3: rgba(36, 31, 45, 0.12); --text: var(--text-primary); --muted: var(--text-muted); --periwinkle: var(--action-primary); --peri: var(--action-primary); --peri-hi: var(--action-primary-hover); --aqua: var(--status-success); --danger: var(--status-error); --line: var(--border-default); --line-2: #EAE6DE; --line-3: #F1EEE8; --glass: rgba(36, 31, 45, 0.04); --glass-2: rgba(36, 31, 45, 0.02); --panel-bg-1: var(--surface-primary); --panel-bg-2: var(--background-primary); --overlay-scrim: var(--overlay); /* Landing-page alias set */ --surface-deep: var(--background-primary); --surface-raised: var(--surface-primary); --paper-edge: var(--background-secondary); --text-emphasis: var(--text-primary); --text-body: #2E2938; --text-faint: var(--text-muted); --interaction-primary: var(--action-primary); --interaction-bright: var(--action-primary-hover); --interaction-ink: #FFFFFF; --interaction-soft: var(--action-soft); --feedback-success: var(--status-success); --feedback-success-bright: #216A94; --feedback-success-dim: var(--status-success-soft); } [data-theme="dark"] { color-scheme: dark; /* ---- 1. Semantic tokens — DARK (warm layered neutrals, no pure black) ---- */ --background-primary: #191521; --background-secondary: #14111B; --surface-primary: #221D2C; --surface-elevated: #2B2537; --surface-interactive: #2E2839; --surface-sunk: #14111B; --text-primary: #ECE8F1; --text-secondary: rgba(236, 232, 241, 0.78); --text-muted: rgba(236, 232, 241, 0.64); --text-placeholder: rgba(236, 232, 241, 0.52); --text-inverse: #241F2D; --border-default: rgba(236, 232, 241, 0.15); --border-strong: rgba(236, 232, 241, 0.28); --border-focus: #B49CE8; --action-primary: #A98BE0; --action-primary-hover: #BAA1E9; --action-primary-ink: #1D1826; --action-soft: rgba(169, 139, 224, 0.14); --action-secondary: transparent; --action-secondary-ink: #BCA5EA; --status-success: #5DADE2; --status-success-soft: rgba(93, 173, 226, 0.14); --status-warning: #E0A93E; --status-warning-soft: rgba(224, 169, 62, 0.14); --status-error: #F28B82; --status-error-soft: rgba(242, 139, 130, 0.12); --status-info: #82B4E4; --status-info-soft: rgba(130, 180, 228, 0.12); --focus-ring: #B49CE8; --overlay: rgba(0, 0, 0, 0.60); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35); --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.45); --surface-ink: #221D2C; --text-on-ink: #ECE8F1; --text-on-ink-muted: rgba(236, 232, 241, 0.74); --border-on-ink: rgba(236, 232, 241, 0.16); --accent-on-ink: #C9B4EF; /* Success/verified green legible on the always-dark ink surface. The light theme's --status-success (#1E7A4C) is too dark to read there. */ --status-success-on-ink: #5BC58E; /* ---- 2. Legacy aliases — DARK ---- */ --void: var(--background-primary); --void-2: var(--background-secondary); --paper: var(--surface-primary); --aubergine: var(--text-primary); --aubergine-2: var(--text-secondary); --aubergine-3: var(--text-muted); --bone: var(--text-primary); --bone-2: rgba(236, 232, 241, 0.10); --bone-3: rgba(236, 232, 241, 0.14); --text: var(--text-primary); --muted: var(--text-muted); --periwinkle: var(--action-primary); --peri: var(--action-primary); --peri-hi: var(--action-primary-hover); --aqua: var(--status-success); --danger: var(--status-error); --line: var(--border-default); --line-2: rgba(236, 232, 241, 0.08); --line-3: rgba(236, 232, 241, 0.05); --glass: rgba(236, 232, 241, 0.05); --glass-2: rgba(236, 232, 241, 0.03); --panel-bg-1: var(--surface-primary); --panel-bg-2: var(--background-primary); --overlay-scrim: var(--overlay); --surface-deep: var(--background-primary); --surface-raised: var(--surface-elevated); --paper-edge: var(--surface-elevated); --text-emphasis: var(--text-primary); --text-body: rgba(236, 232, 241, 0.92); --text-faint: var(--text-muted); --interaction-primary: var(--action-primary); --interaction-bright: var(--action-primary-hover); --interaction-ink: var(--action-primary-ink); --interaction-soft: var(--action-soft); --feedback-success: var(--status-success); --feedback-success-bright: #85C1E9; --feedback-success-dim: var(--status-success-soft); } /* System preference applies only when the visitor hasn't chosen. Values must mirror the [data-theme="dark"] block above exactly. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { color-scheme: dark; --background-primary: #191521; --background-secondary: #14111B; --surface-primary: #221D2C; --surface-elevated: #2B2537; --surface-interactive: #2E2839; --surface-sunk: #14111B; --text-primary: #ECE8F1; --text-secondary: rgba(236, 232, 241, 0.78); --text-muted: rgba(236, 232, 241, 0.64); --text-placeholder: rgba(236, 232, 241, 0.52); --text-inverse: #241F2D; --border-default: rgba(236, 232, 241, 0.15); --border-strong: rgba(236, 232, 241, 0.28); --border-focus: #B49CE8; --action-primary: #A98BE0; --action-primary-hover: #BAA1E9; --action-primary-ink: #1D1826; --action-soft: rgba(169, 139, 224, 0.14); --action-secondary-ink: #BCA5EA; --status-success: #5DADE2; --status-success-soft: rgba(93, 173, 226, 0.14); --status-warning: #E0A93E; --status-warning-soft: rgba(224, 169, 62, 0.14); --status-error: #F28B82; --status-error-soft: rgba(242, 139, 130, 0.12); --status-info: #82B4E4; --status-info-soft: rgba(130, 180, 228, 0.12); --focus-ring: #B49CE8; --overlay: rgba(0, 0, 0, 0.60); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35); --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.45); --surface-ink: #221D2C; --text-on-ink: #ECE8F1; --text-on-ink-muted: rgba(236, 232, 241, 0.74); --border-on-ink: rgba(236, 232, 241, 0.16); --accent-on-ink: #C9B4EF; --status-success-on-ink: #5BC58E; --void: var(--background-primary); --void-2: var(--background-secondary); --paper: var(--surface-primary); --aubergine: var(--text-primary); --aubergine-2: var(--text-secondary); --aubergine-3: var(--text-muted); --bone: var(--text-primary); --bone-2: rgba(236, 232, 241, 0.10); --bone-3: rgba(236, 232, 241, 0.14); --text: var(--text-primary); --muted: var(--text-muted); --periwinkle: var(--action-primary); --peri: var(--action-primary); --peri-hi: var(--action-primary-hover); --aqua: var(--status-success); --danger: var(--status-error); --line: var(--border-default); --line-2: rgba(236, 232, 241, 0.08); --line-3: rgba(236, 232, 241, 0.05); --glass: rgba(236, 232, 241, 0.05); --glass-2: rgba(236, 232, 241, 0.03); --panel-bg-1: var(--surface-primary); --panel-bg-2: var(--background-primary); --overlay-scrim: var(--overlay); --surface-deep: var(--background-primary); --surface-raised: var(--surface-elevated); --paper-edge: var(--surface-elevated); --text-emphasis: var(--text-primary); --text-body: rgba(236, 232, 241, 0.92); --text-faint: var(--text-muted); --interaction-primary: var(--action-primary); --interaction-bright: var(--action-primary-hover); --interaction-ink: var(--action-primary-ink); --interaction-soft: var(--action-soft); --feedback-success: var(--status-success); --feedback-success-bright: #85C1E9; --feedback-success-dim: var(--status-success-soft); } } /* ============================================================ Shared form controls — one fix for every page. Native selects, inputs and textareas must always have a visible surface, readable text and a real border in both themes; dropdown menus must never be transparent. ============================================================ */ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { background-color: var(--surface-primary); color: var(--text-primary); border: 1px solid var(--border-default); border-radius: var(--radius-sm); font-family: inherit; font-size: 0.95rem; line-height: 1.4; padding: 10px 12px; min-height: 42px; max-width: 100%; min-width: 0; } select { cursor: pointer; } select option, select optgroup { background-color: var(--surface-primary); color: var(--text-primary); } input::placeholder, textarea::placeholder { color: var(--text-placeholder); opacity: 1; } input:not([type="checkbox"]):not([type="radio"]):focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; border-color: var(--border-focus); } input:disabled, select:disabled, textarea:disabled { background-color: var(--surface-sunk); color: var(--text-muted); border-color: var(--line-2); cursor: not-allowed; } input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"], input.invalid, select.invalid, textarea.invalid { border-color: var(--status-error); } button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } button:disabled { opacity: 0.55; cursor: not-allowed; } /* ============================================================ Shared toggle control — same markup/classes on every page. ============================================================ */ .theme-toggle-btn { display: inline-flex; align-items: center; gap: 7px; font-family: inherit; font-size: 0.82rem; font-weight: 600; line-height: 1; background: var(--glass); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 10px 14px; min-height: 42px; cursor: pointer; white-space: nowrap; } .theme-toggle-btn:hover { background: var(--bone-2); } .theme-toggle-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } /* The candidate and admin topbars (styles.css) use --surface-ink, which stays dark in BOTH themes. The tokens above are light-surface values, so inside those headers the control renders near-black on near-black. Re-point it at the on-ink scale, which is defined for both themes. Scoped by body class on purpose: the client/marketplace .topbar (client.css) uses --surface-elevated and DOES follow the theme, so it must keep the default treatment. */ .candidate-page .topbar .theme-toggle-btn, .admin-page .topbar .theme-toggle-btn { color: var(--text-on-ink); border-color: var(--border-on-ink); background: rgba(243, 239, 249, 0.08); } .candidate-page .topbar .theme-toggle-btn:hover, .admin-page .topbar .theme-toggle-btn:hover { background: rgba(243, 239, 249, 0.16); } .theme-toggle-btn .theme-toggle-icon { font-size: 0.95rem; } .theme-toggle-btn .theme-toggle-label { display: none; } @media (min-width: 720px) { .theme-toggle-btn .theme-toggle-label { display: inline; } } /* The topbar is an ink (dark) surface on every page and in BOTH themes, so a toggle sitting in it must use the on-ink palette regardless of the page theme. Without this, the light-theme --text/--glass tokens render dark-on-dark and the button text/icon disappear (only the faint pill outline shows). Matches the on-ink treatment the sibling nav links and the "Demo mode" button already use. */ .topbar .theme-toggle-btn { background: rgba(243, 239, 249, 0.08); color: var(--text-on-ink); border-color: var(--border-on-ink); } .topbar .theme-toggle-btn:hover { background: rgba(243, 239, 249, 0.16); } /* ============================================================ Theme-aware brand logo. The landing masthead/footer and the client + marketplace topbars sit on --surface-primary / --surface-elevated / --background-primary, all of which are near-white in the light theme. The cream logo disappears there. `content:` swaps the rendered image without touching the src attribute, so the alt text survives and the theme toggle updates it with no reload. The src stays the dark-ink logo, which is the correct light-theme default and the safe fallback. The candidate and admin topbars are --surface-ink (dark in both themes) and deliberately do NOT use this class — they keep talza-logo-light.svg. ============================================================ */ .brand-logo--adaptive { content: url("/talza-logo.svg"); } [data-theme="dark"] .brand-logo--adaptive { content: url("/talza-logo-light.svg"); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) .brand-logo--adaptive { content: url("/talza-logo-light.svg"); } } @media (prefers-reduced-motion: no-preference) { html { transition: background-color 0.15s ease, color 0.15s ease; } } /* ============================================================ Brand logo — theme-aware, one source of truth for every page. Each page ships a single whose src is the dark-ink wordmark (correct on the light theme, and the fallback if `content` isn't supported). The rules below swap the rendered artwork to the cream wordmark on the dark theme so the mark and text stay high-contrast in both. The alt text is preserved. ============================================================ */ .brand-logo { content: url("/talza-logo.svg"); } [data-theme="dark"] .brand-logo { content: url("/talza-logo-light.svg"); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) .brand-logo { content: url("/talza-logo-light.svg"); } } /* The default dark-ink wordmark is only legible on light content surfaces. The topbar is an ink surface in every theme, so its logo must always be the cream wordmark — otherwise the light theme shows the dark wordmark dark-on-dark. Higher specificity than the base .brand-logo rule, and agrees with the dark-theme rule above. */ .topbar .brand-logo { content: url("/talza-logo-light.svg"); }