/* Design tokens. Two independent axes, so a palette choice never forces a brightness: [data-mode="light"|"dark"] -> surfaces, text, borders [data-theme="…"] -> accent hue, set for BOTH modes Every colour used anywhere in the app resolves through a token here. No component hardcodes a hex value, and nothing about presentation is ever written into task or workspace data — a task does not know what colour it is. The mode attribute is written by app/js/ui/theme.js. It is always present on (index.html ships with a default) so there is no unstyled first paint. */ :root { /* spacing — a 4px rhythm */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-8: 3rem; --radius-sm: 4px; --radius: 8px; --radius-lg: 14px; --radius-pill: 999px; /* System font stack: no webfont request, no layout shift, and font-src stays 'self'. */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.5rem; --text-2xl: 2rem; --weight-normal: 400; --weight-medium: 500; --weight-bold: 650; --leading-tight: 1.25; --leading-normal: 1.55; --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.08); --shadow: 0 4px 16px rgb(0 0 0 / 0.12); --transition: 140ms ease; --header-height: 3.5rem; --content-max: 80rem; /* Semantic colours that stay constant across themes. */ --color-danger: #ef4444; /* IMPORTANCE, as its own colour. Not the danger colour: a task being important is not a task being wrong, and reusing the error colour would make a well-run board look alarming. */ --important: #b45309; --important-ink: #92400e; --color-warning: #f59e0b; --color-success: #10b981; --color-info: #3b82f6; } /* ---------- mode: light ---------- */ :root[data-mode="light"] { --bg: #f6f7f9; --surface: #ffffff; --surface-raised: #ffffff; --surface-sunken: #eef0f4; --text: #11161d; --text-muted: #59616e; --text-subtle: #7d8794; --text-inverse: #ffffff; --border: #dfe3ea; --border-strong: #c3cad5; --overlay: rgb(17 22 29 / 0.45); /* Dark enough to hold 4.5:1 against a light card. */ --important: #b45309; --important-ink: #92400e; } /* ---------- mode: dark ---------- */ :root[data-mode="dark"] { --bg: #0b0f16; --surface: #141a24; --surface-raised: #1b222e; --surface-sunken: #0d1219; --text: #e8edf5; --text-muted: #9aa6b8; --text-subtle: #74809a; --text-inverse: #0b0f16; /* LIGHTER IN DARK MODE. The light-mode amber is invisible as a 2px outline on a dark card, which would make importance a signal only half the users could see. */ --important: #f59e0b; --important-ink: #fbbf24; --border: #232c3a; --border-strong: #33405a; --overlay: rgb(0 0 0 / 0.6); --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4); --shadow: 0 6px 24px rgb(0 0 0 / 0.45); } /* ---------- themes: accent only, defined for both modes ---------- */ :root[data-theme="midnight"] { --accent: #3b82f6; --accent-hover: #2f6fdc; --accent-soft: rgb(59 130 246 / 0.14); --accent-contrast: #ffffff; } :root[data-theme="slate"] { --accent: #64748b; --accent-hover: #52607a; --accent-soft: rgb(100 116 139 / 0.16); --accent-contrast: #ffffff; } :root[data-theme="forest"] { --accent: #10b981; --accent-hover: #0d9d6d; --accent-soft: rgb(16 185 129 / 0.15); --accent-contrast: #04231a; } :root[data-theme="solar"] { --accent: #f59e0b; --accent-hover: #d98708; --accent-soft: rgb(245 158 11 / 0.16); --accent-contrast: #241802; } /* Solar and Forest accents are light; in light mode they need a darker variant to keep text on accent-coloured surfaces above the 4.5:1 contrast threshold. */ :root[data-mode="light"][data-theme="forest"] { --accent: #0a8a60; --accent-hover: #077352; --accent-contrast: #ffffff; } :root[data-mode="light"][data-theme="solar"] { --accent: #b45309; --accent-hover: #92400e; --accent-contrast: #ffffff; }