/* Design tokens extracted from NEW_UI/KlearScreen.dc.html (LIGHT/DARK consts, ~L1746-1763) — source of truth for the UI migration, see UI_MIGRATION_PLAN.md. Loaded before legacy.css, which bridges its own 5 variables onto these so all existing pages pick up the new palette with zero per-page template changes (see the bridge comment there). */ :root { --k-bg: #F7F5F0; --k-surface: #FFFFFF; --k-field: #FFFFFF; --k-ink: #16233F; --k-soft: #6A7893; --k-line: #E3DFD5; --k-primary: #16233F; --k-onPrimary: #FFFFFF; --k-accent: #0E9C7C; --k-accentSoft: rgba(14, 156, 124, 0.10); --k-accentLine: rgba(14, 156, 124, 0.24); --k-warn: #A8611A; --k-warnSoft: rgba(168, 97, 26, 0.10); --k-cat2: #4E6FB5; --k-cat3: #C08A3E; --k-cat4: #9AA3B2; --k-ownerBg: #16233F; --k-ownerFg: #FFFFFF; /* Thai needs more vertical room for stacked vowels/tone marks than Latin does at the same font-size — see html[lang="th"] below. */ --k-lh-heading: 1.15; --k-lh-body: 1.2; } @media (prefers-color-scheme: dark) { :root { --k-bg: #0C1322; --k-surface: #161F35; --k-field: #111A2E; --k-ink: #EEF2F9; --k-soft: #8FA0BD; --k-line: rgba(255, 255, 255, 0.11); --k-primary: #0E9C7C; --k-onPrimary: #05231B; --k-accent: #0E9C7C; --k-accentSoft: rgba(14, 156, 124, 0.16); --k-accentLine: rgba(14, 156, 124, 0.32); --k-warn: #EDA95F; --k-warnSoft: rgba(237, 169, 95, 0.14); --k-cat2: #7C9BE0; --k-cat3: #D8A05A; --k-cat4: #69748C; --k-ownerBg: #7C9BE0; --k-ownerFg: #08142E; } } /* Manual override from the theme switch (partials/theme_switch.html -> apps.accounts.views.SetThemeView). The cookie is read server-side by apps.accounts.context_processors.theme and stamped onto in base.html, so it wins over the OS preference in either direction and is correct on the very first paint. Dark accent/primary is the SAME #0E9C7C as light, at explicit user request — the design's #2FE0B0 mint read as too vivid. The original pre-migration green (#0F766E) was the first choice but only manages 2.99:1 against --k-surface, well under AA, so the light-theme green was used instead: 4.73:1 on surface, 5.36:1 on bg. */ :root[data-theme="dark"] { --k-bg: #0C1322; --k-surface: #161F35; --k-field: #111A2E; --k-ink: #EEF2F9; --k-soft: #8FA0BD; --k-line: rgba(255, 255, 255, 0.11); --k-primary: #0E9C7C; --k-onPrimary: #05231B; --k-accent: #0E9C7C; --k-accentSoft: rgba(14, 156, 124, 0.16); --k-accentLine: rgba(14, 156, 124, 0.32); --k-warn: #EDA95F; --k-warnSoft: rgba(237, 169, 95, 0.14); --k-cat2: #7C9BE0; --k-cat3: #D8A05A; --k-cat4: #69748C; --k-ownerBg: #7C9BE0; --k-ownerFg: #08142E; } :root[data-theme="light"] { --k-bg: #F7F5F0; --k-surface: #FFFFFF; --k-field: #FFFFFF; --k-ink: #16233F; --k-soft: #6A7893; --k-line: #E3DFD5; --k-primary: #16233F; --k-onPrimary: #FFFFFF; --k-accent: #0E9C7C; --k-accentSoft: rgba(14, 156, 124, 0.10); --k-accentLine: rgba(14, 156, 124, 0.24); --k-warn: #A8611A; --k-warnSoft: rgba(168, 97, 26, 0.10); --k-cat2: #4E6FB5; --k-cat3: #C08A3E; --k-cat4: #9AA3B2; --k-ownerBg: #16233F; --k-ownerFg: #FFFFFF; } /* lang="th" is already on via django.template.context_processors.i18n (F0) — no template change needed to react to it here. */ html[lang="th"] { --k-lh-heading: 1.45; --k-lh-body: 1.5; } /* UI_MIGRATION_PLAN.md F2 — the only reset rules NOT scoped under .k-legacy (see legacy.css): they apply to itself, which sits *outside* the .k-legacy wrapper div, and they're generic enough that a fully-migrated page would want the exact same thing. */ * { box-sizing: border-box; } body { margin: 0; min-height: 100vh; font-family: var(--k-font, system-ui, -apple-system, "Segoe UI", sans-serif); background: var(--k-bg); color: var(--k-ink); } /* Alpine functional utility, not a visual style — must stay global so both legacy and future migrated Alpine islands can rely on it. */ [x-cloak] { display: none !important; }