/* ===================================================================== Selectable UI themes (v1.88.0) One block per theme, scoped by the data-theme attribute that base.html stamps on from the resolved user/school preference (sfm_config/themes.py). A block may only: 1. override design tokens declared in colors_and_type.css or the shell-token block at the top of sfm-refresh.css, and 2. override Bootstrap's own CSS variables, so the many pages still built on Bootstrap components follow along. No page-level selectors. If a page ignores the theme, tokenise the page. tests/test_ui_theme.py enforces this and audits every text/background pair below for WCAG contrast. "classic" has no block: the base tokens *are* Classic. ===================================================================== */ /* --------------------------------------------------------------------- High Contrast — school default since 2026-09-14. Navy chrome with white type (10.8:1), white canvas, near-black text (18.6:1), hard 2px borders instead of shadows and tints, links always underlined, solid status pills. Cyan is never used as text. --------------------------------------------------------------------- */ :root[data-theme="contrast"] { --base-font-size: 16px; --text-color: #111318; /* 18.6:1 on white */ --text-body: #111318; --text-muted: #3f454d; /* 9.7:1 */ --text-disabled: #5c636a; /* 6.1:1 */ --link-color: #32357d; --link-underline: underline; --shell-bg: #ffffff; --canvas-bg: #ffffff; --surface-bg: #ffffff; --light-bg: #ffffff; --canvas-border: #424242; --border-color: #424242; --card-border-w: 2px; --shadow-resting: none; --shadow-card: none; --shadow-elevated: 0 0 0 2px #424242; --chrome-bg: #32357d; --rail-bg: #32357d; --brand-logo-color-display: none; /* navy chrome: use the supplied reverse seal */ --brand-logo-reverse-display: inline-block; --surface-subtle: #f2f2f2; --chrome-fg: #ffffff; --chrome-muted: #d6d8f0; /* 8.3:1 on navy */ --chrome-link: #ffffff; --chrome-link-icon: #d6d8f0; --chrome-border: #5558a0; --chrome-hover-bg: rgba(255,255,255,0.16); --chrome-hover-fg: #ffffff; --chrome-active-bg: rgba(255,255,255,0.18); --chrome-active-fg: #ffffff; --input-bg: #ffffff; --input-fg: #111318; --input-border: #111318; --input-border-w: 2px; --placeholder-fg: #3f454d; --focus-ring: 0 0 0 2px #ffffff, 0 0 0 5px #00b0e7; --btn-cyan-fg: #0b1a24; /* 8.1:1 on cyan; white-on-cyan is 2.5:1 */ --touch-min: 44px; /* Solid status pills — each pair >= 4.5:1 */ --pill-pending-bg: #ffc107; --pill-pending-fg: #111318; /* 11.4:1 */ --pill-approved-bg: #1e6b32; --pill-approved-fg: #ffffff; /* 6.6:1 */ --pill-rejected-bg: #a11726; --pill-rejected-fg: #ffffff; /* 7.9:1 */ --pill-revision-bg: #b04a00; --pill-revision-fg: #ffffff; /* 5.5:1 */ --pill-archived-bg: #4a4a4a; --pill-archived-fg: #ffffff; /* 8.9:1 */ --pill-info-bg: #32357d; --pill-info-fg: #ffffff; /* 10.8:1 */ --pill-navy-bg: #32357d; --pill-navy-fg: #ffffff; --text-on-info-10: #005a76; --text-on-warning-10: #4d3a00; /* Bootstrap 5.3 variables — pages still on Bootstrap components */ --bs-body-color: #111318; --bs-body-bg: #ffffff; --bs-secondary-color: #3f454d; --bs-tertiary-color: #3f454d; --bs-border-color: #424242; --bs-border-width: 2px; --bs-link-color: #32357d; --bs-link-color-rgb: 50, 53, 125; --bs-link-hover-color: #24265c; --bs-link-decoration: underline; --bs-primary: #32357d; --bs-primary-rgb: 50, 53, 125; --bs-secondary-bg: #ffffff; --bs-tertiary-bg: #ffffff; --bs-heading-color: #32357d; --bs-box-shadow-sm: none; --bs-box-shadow: none; } /* --------------------------------------------------------------------- Large Print — Classic's palette, everything ~1/6 bigger, larger controls, stronger secondary text. The shell is scaled with `zoom` so the many px-sized rules in per-page stylesheets grow too (tablet and up); body text ends up at ~18px on a laptop and 17px on a phone. --------------------------------------------------------------------- */ :root[data-theme="large"] { --base-font-size: 16px; --body-line: 1.6; --text-muted: #5a626b; /* 6.2:1 on white */ --placeholder-fg: #616161; /* 5.7:1 */ --input-border: #bdbdbd; --input-border-w: 2px; --touch-min: 44px; --focus-ring: 0 0 0 2px #ffffff, 0 0 0 5px #32357d; --bs-secondary-color: #5a626b; } /* Zoom only from tablet up: at 390px a 1.15 zoom leaves a 339px viewport and fixed-width cards overflow. Phones get the larger base size only. */ @media (min-width: 768px) { :root[data-theme="large"] .app-frame { zoom: 1.15; } } @media (max-width: 767.98px) { :root[data-theme="large"] { --base-font-size: 17px; } } :root[data-theme="large"] input, :root[data-theme="large"] select, :root[data-theme="large"] textarea { font-size: max(16px, 1em); } /* --------------------------------------------------------------------- Warm Paper — cream surfaces, deep navy-black text, warm borders, SangBleu for display headings. Navy and cyan stay the only hues. --------------------------------------------------------------------- */ :root[data-theme="paper"] { --base-font-size: 16px; --body-line: 1.6; --text-color: #232650; /* 13.6:1 on paper */ --text-body: #232650; --text-muted: #5b5e6e; /* 6.1:1 on paper, 5.6:1 on cream */ --shell-bg: #f3efe6; --canvas-bg: #fbf9f4; --surface-bg: #fbf9f4; --light-bg: #f3efe6; --rail-bg: #f3efe6; --surface-subtle: #f3efe6; --chrome-bg: #fbf9f4; --chrome-fg: #32357d; --chrome-muted: #5b5e6e; --chrome-link: #232650; --chrome-link-icon: #5b5e6e; --chrome-border: #d9d2c3; --canvas-border: #d9d2c3; --border-color: #d9d2c3; --card-border-w: 1.5px; --shadow-resting: 0 1px 3px rgba(60,45,20,0.08); --shadow-card: 0 1px 3px rgba(60,45,20,0.08); --shadow-elevated: 0 4px 14px rgba(60,45,20,0.12); --input-bg: #fbf9f4; --input-fg: #232650; --input-border: #c9c1af; --placeholder-fg: #5b5e6e; --touch-min: 44px; --focus-ring: 0 0 0 2px #fbf9f4, 0 0 0 5px #32357d; --font-display: 'SangBleu Versailles', 'Founders Grotesk Condensed', Georgia, serif; --pill-pending-fg: #6b5200; /* 6.5:1 on cream */ --gray-100: #efe9dc; --ui-white: #fbf9f4; --bs-body-color: #232650; --bs-body-bg: #fbf9f4; --bs-secondary-color: #5b5e6e; --bs-border-color: #d9d2c3; --bs-secondary-bg: #f3efe6; --bs-tertiary-bg: #f3efe6; --bs-light-rgb: 243, 239, 230; } :root[data-theme="paper"] h1, :root[data-theme="paper"] h2 { font-weight: 500; } /* Windows High Contrast / forced-colors: let the OS palette through and keep focus + borders visible. Applies to every theme. */ @media (forced-colors: active) { :root { --focus-ring: 0 0 0 3px Highlight; } .pill, .btn, .card, .input, .select, .textarea { forced-color-adjust: auto; border: 1px solid CanvasText; } }