/* ========================================================================== themes.css · Colour tokens only. Structural CSS (layout, spacing, components) lives in theme.css and never changes between themes — only these custom properties do. Five accent themes, each with a light and a dark variant, chosen with a hand-off tool that binary-searches lightness per hue so every theme clears WCAG-ish contrast targets for the pairings the UI actually uses (button text, pill text, link text, muted text). Applied via two attributes on , set by theme.js and persisted to localStorage: data-theme="warm|ocean|forest|graphite|berry" and data-mode="light|dark". The default (no attributes yet, e.g. before theme.js has run, or JS disabled) is warm + light. ========================================================================== */ /* Default: warm / light — matches :root so a no-JS page still looks right */ :root, :root[data-theme="warm"][data-mode="light"] { --canvas: #F2EFEE; --canvas-rgb: 242, 239, 238; --paper: #F9F8F8; --paper-2: #FFFFFF; --accent: #B85A31; --accent-rgb: 184, 90, 49; --accent-dark: #A34B26; --accent-soft: #F1E1DA; --accent-deep: #944625; --sand: #C99782; --wheat: #E7D3CA; --ink: #191615; --slate: #3F3936; --slate-2: #6C6460; --line: #DBD4D1; --line-2: #EAE6E4; --ok: #2E7853; --ok-soft: #E4F1EB; --warn: #90601E; --warn-soft: #F6ECDA; --bad: #B53B30; --bad-soft: #F6E1DF; --info: #40769D; --pass-tint: #EEF7F2; --fail-tint: #F9F1F0; } /* Ocean / light */ :root[data-theme="ocean"][data-mode="light"] { --canvas: #EEF0F2; --canvas-rgb: 238, 240, 242; --paper: #F8F9F9; --paper-2: #FFFFFF; --accent: #2D7BA9; --accent-rgb: 45, 123, 169; --accent-dark: #236C97; --accent-soft: #DAE9F1; --accent-deep: #23648A; --sand: #82AFC9; --wheat: #CADDE7; --ink: #151719; --slate: #363C3F; --slate-2: #60686C; --line: #D1D8DB; --line-2: #E4E8EA; --ok: #2E7853; --ok-soft: #E4F1EB; --warn: #90601E; --warn-soft: #F6ECDA; --bad: #B53B30; --bad-soft: #F6E1DF; --info: #40769D; --pass-tint: #EEF7F2; --fail-tint: #F9F1F0; } /* Forest / light */ :root[data-theme="forest"][data-mode="light"] { --canvas: #EEF2EF; --canvas-rgb: 238, 242, 239; --paper: #F8F9F8; --paper-2: #FFFFFF; --accent: #238547; --accent-rgb: 35, 133, 71; --accent-dark: #1C783E; --accent-soft: #DAF1E2; --accent-deep: #1C703B; --sand: #82C99C; --wheat: #CAE7D5; --ink: #151916; --slate: #363F39; --slate-2: #606C64; --line: #D1DBD5; --line-2: #E4EAE6; --ok: #2E7853; --ok-soft: #E4F1EB; --warn: #90601E; --warn-soft: #F6ECDA; --bad: #B53B30; --bad-soft: #F6E1DF; --info: #40769D; --pass-tint: #EEF7F2; --fail-tint: #F9F1F0; } /* Graphite / light */ :root[data-theme="graphite"][data-mode="light"] { --canvas: #EEEEF2; --canvas-rgb: 238, 238, 242; --paper: #F8F8F9; --paper-2: #FFFFFF; --accent: #6A5ED4; --accent-rgb: 106, 94, 212; --accent-dark: #5345D3; --accent-soft: #DCDAF1; --accent-deep: #4C3DCE; --sand: #8982C9; --wheat: #CDCAE7; --ink: #151519; --slate: #37363F; --slate-2: #61606C; --line: #D2D1DB; --line-2: #E4E4EA; --ok: #2E7853; --ok-soft: #E4F1EB; --warn: #90601E; --warn-soft: #F6ECDA; --bad: #B53B30; --bad-soft: #F6E1DF; --info: #40769D; --pass-tint: #EEF7F2; --fail-tint: #F9F1F0; } /* Berry / light */ :root[data-theme="berry"][data-mode="light"] { --canvas: #F2EEF0; --canvas-rgb: 242, 238, 240; --paper: #F9F8F9; --paper-2: #FFFFFF; --accent: #CA3995; --accent-rgb: 202, 57, 149; --accent-dark: #B0297E; --accent-soft: #F1DAE9; --accent-deep: #9E2873; --sand: #C982AF; --wheat: #E7CADD; --ink: #191517; --slate: #3F363C; --slate-2: #6C6068; --line: #DBD1D8; --line-2: #EAE4E8; --ok: #2E7853; --ok-soft: #E4F1EB; --warn: #90601E; --warn-soft: #F6ECDA; --bad: #B53B30; --bad-soft: #F6E1DF; --info: #40769D; --pass-tint: #EEF7F2; --fail-tint: #F9F1F0; } /* Terracotta / dark */ :root[data-theme="warm"][data-mode="dark"] { --canvas: #1F1B19; --canvas-rgb: 31, 27, 25; --paper: #2B2422; --paper-2: #332E2B; --accent: #BE562A; --accent-rgb: 190, 86, 42; --accent-dark: #E0825A; --accent-soft: #462B20; --accent-deep: #D9987C; --sand: #A46A51; --wheat: #4E362C; --ink: #F1EFEE; --slate: #CEC8C5; --slate-2: #A69E9B; --line: #4D423D; --line-2: #423834; --ok: #3FB57A; --ok-soft: #203C2E; --warn: #D38F2F; --warn-soft: #3E321E; --bad: #E16F64; --bad-soft: #3D221F; --info: #5094C5; --pass-tint: #1D3529; --fail-tint: #351F1D; } /* Ocean / dark */ :root[data-theme="ocean"][data-mode="dark"] { --canvas: #191D1F; --canvas-rgb: 25, 29, 31; --paper: #22272B; --paper-2: #2B3033; --accent: #267BAD; --accent-rgb: 38, 123, 173; --accent-dark: #4BA8DD; --accent-soft: #203846; --accent-deep: #75B3D7; --sand: #5185A4; --wheat: #2C424E; --ink: #EEF0F1; --slate: #C5CBCE; --slate-2: #9BA2A6; --line: #3D474D; --line-2: #343D42; --ok: #3FB57A; --ok-soft: #203C2E; --warn: #D38F2F; --warn-soft: #3E321E; --bad: #E16F64; --bad-soft: #3D221F; --info: #5094C5; --pass-tint: #1D3529; --fail-tint: #351F1D; } /* Forest / dark */ :root[data-theme="forest"][data-mode="dark"] { --canvas: #191F1B; --canvas-rgb: 25, 31, 27; --paper: #222B25; --paper-2: #2B332E; --accent: #1E8644; --accent-rgb: 30, 134, 68; --accent-dark: #25C45F; --accent-soft: #20462E; --accent-deep: #51CD7E; --sand: #51A46F; --wheat: #2C4E39; --ink: #EEF1EF; --slate: #C5CEC8; --slate-2: #9BA69F; --line: #3D4D43; --line-2: #344239; --ok: #3FB57A; --ok-soft: #203C2E; --warn: #D38F2F; --warn-soft: #3E321E; --bad: #E16F64; --bad-soft: #3D221F; --info: #5094C5; --pass-tint: #1D3529; --fail-tint: #351F1D; } /* Graphite / dark */ :root[data-theme="graphite"][data-mode="dark"] { --canvas: #19191F; --canvas-rgb: 25, 25, 31; --paper: #23222B; --paper-2: #2C2B33; --accent: #6558DA; --accent-rgb: 101, 88, 218; --accent-dark: #9288E8; --accent-soft: #232046; --accent-deep: #9790DF; --sand: #5951A4; --wheat: #2F2C4E; --ink: #EFEEF1; --slate: #C6C5CE; --slate-2: #9C9BA6; --line: #3E3D4D; --line-2: #353442; --ok: #3FB57A; --ok-soft: #203C2E; --warn: #D38F2F; --warn-soft: #3E321E; --bad: #E16F64; --bad-soft: #3D221F; --info: #5094C5; --pass-tint: #1D3529; --fail-tint: #351F1D; } /* Berry / dark */ :root[data-theme="berry"][data-mode="dark"] { --canvas: #1F191D; --canvas-rgb: 31, 25, 29; --paper: #2B2227; --paper-2: #332B30; --accent: #D12F96; --accent-rgb: 209, 47, 150; --accent-dark: #E36BB7; --accent-soft: #462038; --accent-deep: #DC85BC; --sand: #A45185; --wheat: #4E2C42; --ink: #F1EEF0; --slate: #CEC5CB; --slate-2: #A69BA2; --line: #4D3D47; --line-2: #42343D; --ok: #3FB57A; --ok-soft: #203C2E; --warn: #D38F2F; --warn-soft: #3E321E; --bad: #E16F64; --bad-soft: #3D221F; --info: #5094C5; --pass-tint: #1D3529; --fail-tint: #351F1D; } /* ========================================================================== Print always renders in the warm/light palette regardless of the on-screen theme or mode, so certificates and reports are legible on white paper even if the candidate is using a dark theme when they print. ========================================================================== */ @media print { :root { --canvas: #F2EFEE; --canvas-rgb: 242, 239, 238; --paper: #F9F8F8; --paper-2: #FFFFFF; --accent: #B85A31; --accent-rgb: 184, 90, 49; --accent-dark: #A34B26; --accent-soft: #F1E1DA; --accent-deep: #944625; --sand: #C99782; --wheat: #E7D3CA; --ink: #191615; --slate: #3F3936; --slate-2: #6C6460; --line: #DBD4D1; --line-2: #EAE6E4; --ok: #2E7853; --ok-soft: #E4F1EB; --warn: #90601E; --warn-soft: #F6ECDA; --bad: #B53B30; --bad-soft: #F6E1DF; --info: #40769D; --pass-tint: #EEF7F2; --fail-tint: #F9F1F0; } }