/* themes.css — typography source + colour schemes. * * Global, served by Django from convoke/static and linked by the SPA shell * template. Token names follow the 2026-07 redesign (docs/superpowers/design/ * design-spec.md); the legacy names (--bg, --surface, …) are kept as aliases * so rules not yet migrated keep resolving. Dark mode = [data-theme="dark"] * on — stamped pre-paint by base.html's bootstrap script, kept in sync * by ts/utils/theme.ts (ThemeToggle button; OS preference until an explicit, * persisted choice). */ /* Instrument Sans (variable, 400–700) — self-hosted: the CSP is same-origin, * so no Google Fonts. latin-ext carries the Polish diacritics. */ @font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/instrument-sans-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/instrument-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* Native widgets (selects, date/time pickers, scrollbars) follow the theme. */ color-scheme: light; /* --- redesign tokens (light) --- */ --bg-page: #F4F6FA; /* app frame bg (the mock's #EDF0F6 is canvas-only) */ --bg-surface: #ffffff; --bg-surface-alt: #F4F6FA; --bg-active: #E8ECF8; --border-color: #E5E8EF; --text-primary: #12193B; --text-secondary: #5F6A85; --text-tertiary: #8A93AB; --text-muted: #C6CCDA; --text-inverse: #ffffff; --accent: #002583; --accent-light: #001A5C; --highlight: #FFB800; --success: #067647; --success-bg: #E6F4EC; --warning: #7A5800; --warning-bg: #FFF4D6; --neutral-bg: #EEF1F6; /* extras the mocks use outside their :root (tokenised per design-spec §1) */ --text-label: #3B445C; /* nav items, form labels, secondary cells */ --thead-bg: #FAFBFD; --row-hover: #F7F9FC; --text-on-dark-muted: #B9C4E4; /* copy on navy surfaces (totals card, login) */ --cta-gradient: linear-gradient(135deg, #002583, #001A5C); /* Card accent hues — decorative category colouring for the board cards * (assigned deterministically by id; not a data-viz series). */ --card-accent-0: #002583; --card-accent-1: #B77E00; --card-accent-2: #067647; --card-accent-3: #0E7490; --card-accent-4: #6D28D9; --card-accent-5: #BE185D; --card-accent-6: #6E3B1A; --card-accent-7: #7C2D12; --card-accent-8: #1E40AF; --card-accent-9: #5B21B6; --card-accent-10: #0D6B64; --card-accent-11: #9D4EDD; /* --- legacy aliases (pre-redesign names still used across the CSS) --- */ --bg: var(--bg-page); --surface: var(--bg-surface); --border: var(--border-color); --text: var(--text-primary); --muted: var(--text-secondary); --placeholder: var(--text-tertiary); --accent-contrast: var(--text-inverse); --danger: #b91c1c; } [data-theme="dark"] { color-scheme: dark; --bg-page: #0f1419; --bg-surface: #1a1f2b; --bg-surface-alt: #252d3a; --bg-active: #2d3548; --border-color: #3a4456; --text-primary: #e8ecf2; --text-secondary: #a8b2c3; --text-tertiary: #7a8395; --text-muted: #515d73; --text-inverse: #0f1419; --accent: #4a8fff; --accent-light: #6a9eff; --highlight: #ffc933; --success: #10b981; --success-bg: #064e3b; --warning: #fbbf24; --warning-bg: #78350f; --neutral-bg: #374151; --text-label: #a8b2c3; --thead-bg: #1e2531; --row-hover: #232b39; --text-on-dark-muted: #B9C4E4; --cta-gradient: linear-gradient(135deg, #4a8fff, #2c66d9); --card-accent-0: #4a8fff; --card-accent-1: #ffc933; --card-accent-2: #10b981; --card-accent-3: #22d3ee; --card-accent-4: #a78bfa; --card-accent-5: #f472b6; --card-accent-6: #D97706; --card-accent-7: #F97316; --card-accent-8: #3B82F6; --card-accent-9: #D946EF; --card-accent-10: #14B8A6; --card-accent-11: #EC4899; --danger: #f87171; }