/* * Retmind Boss — design tokens v0 (CSS custom properties). * Mirrors packages/tokens/tokens.ts exactly (parity is enforced by apps/web tests). * * Theme selection: * — explicit (set by the app from the user's choice / system); * no attribute — follows prefers-color-scheme. * * Brand rule: --accent (#C4B794) is never a text/icon color on light backgrounds; * use --accent-strong for accent-colored text. */ /* ---------- Theme-independent ---------- */ :root { --font-family-base: "Century Gothic", CenturyGothic, "URW Gothic", "Didact Gothic", system-ui, sans-serif; --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; --font-size-xs: 0.75rem; --font-size-sm: 0.8125rem; --font-size-base: 0.875rem; --font-size-md: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem; --font-size-3xl: 1.875rem; --line-height-base: 1.45; --line-height-tight: 1.2; --font-weight-regular: 400; --font-weight-bold: 700; --corner-sm: 4px; --corner-md: 6px; --corner-lg: 10px; --corner-full: 9999px; --sidebar-width: 15rem; --header-height: 3.5rem; --duration-fast: 120ms; --duration-base: 200ms; } /* ---------- Light theme (default) ---------- */ :root, [data-theme="light"] { color-scheme: light; --bg-canvas: #FAF8F3; --bg-surface: #FFFFFF; --bg-raised: #FFFFFF; --bg-subtle: #F4F1EA; --bg-muted: #EAE5D9; --bg-selected: #F3EFE4; --bg-inverse: #000000; --nav-bg: #000000; --nav-fg: #F4F2EC; --nav-fg-muted: #BDB8AC; --nav-item-hover-bg: #1A1916; --nav-item-active-bg: #26241F; --nav-item-active-fg: #C4B794; --nav-border: #000000; --text-primary: #000000; --text-secondary: #4A463D; --text-muted: #6B665B; --text-disabled: #9E998D; --text-inverse: #FFFFFF; --text-link: #6E6243; --border-subtle: #E2DCCD; --border-control: #857E6D; --border-strong: #000000; --focus-ring: #000000; --accent: #C4B794; --accent-strong: #6E6243; --accent-subtle: #F3EFE4; --accent-hover: #AB9C72; --on-accent: #000000; --primary-bg: #000000; --primary-bg-hover: #2B2924; --primary-fg: #FFFFFF; --secondary-bg: #FFFFFF; --secondary-bg-hover: #F4F1EA; --secondary-fg: #000000; --success-fg: #1D7A3F; --success-subtle: #E6F4EA; --success-solid: #1A7A3E; --success-on-solid: #FFFFFF; --warning-fg: #8A5A00; --warning-subtle: #FDF1D3; --warning-solid: #F2B01E; --warning-on-solid: #000000; --danger-fg: #B42318; --danger-subtle: #FDEBE9; --danger-solid: #C8281C; --danger-on-solid: #FFFFFF; --orange-fg: #B84A0B; --orange-subtle: #FDEEE3; --orange-solid: #B84A0B; --orange-on-solid: #FFFFFF; --info-fg: #1F5FAD; --info-subtle: #E8F0FB; --info-solid: #2563C9; --info-on-solid: #FFFFFF; --neutral-fg: #5C584F; --neutral-subtle: #EFECE5; --neutral-solid: #6B665B; --neutral-on-solid: #FFFFFF; --sla-ok-fg: #1D7A3F; --sla-ok-bg: #E6F4EA; --sla-warn-fg: #8A5A00; --sla-warn-bg: #FDF1D3; --sla-breach-fg: #B42318; --sla-breach-bg: #FDEBE9; --sla-paused-fg: #5C584F; --sla-paused-bg: #EFECE5; --priority-p1-bg: #C8281C; --priority-p1-fg: #FFFFFF; --priority-p2-bg: #FDEEE3; --priority-p2-fg: #B84A0B; --priority-p3-bg: #E8F0FB; --priority-p3-fg: #1F5FAD; --priority-p4-bg: #EFECE5; --priority-p4-fg: #5C584F; --health-green-fg: #1D7A3F; --health-green-bg: #E6F4EA; --health-yellow-fg: #8A5A00; --health-yellow-bg: #FDF1D3; --health-red-fg: #B42318; --health-red-bg: #FDEBE9; --elevation-raised: 0 1px 2px rgb(0 0 0 / 0.06), 0 2px 8px rgb(0 0 0 / 0.06); --elevation-overlay: 0 8px 24px rgb(0 0 0 / 0.14); --overlay-backdrop: rgb(0 0 0 / 0.4); } /* ---------- Dark theme ---------- */ /* The same declaration list is used for explicit [data-theme="dark"] and for the system preference when no explicit light theme is set. Keep both blocks identical. */ [data-theme="dark"] { color-scheme: dark; --bg-canvas: #000000; --bg-surface: #0F0F0E; --bg-raised: #1A1916; --bg-subtle: #1A1916; --bg-muted: #26241F; --bg-selected: #2A2619; --bg-inverse: #F4F2EC; --nav-bg: #0F0F0E; --nav-fg: #F4F2EC; --nav-fg-muted: #BDB8AC; --nav-item-hover-bg: #1A1916; --nav-item-active-bg: #26241F; --nav-item-active-fg: #C4B794; --nav-border: #2B2924; --text-primary: #F4F2EC; --text-secondary: #BDB8AC; --text-muted: #8F8A7E; --text-disabled: #5E5A51; --text-inverse: #000000; --text-link: #C4B794; --border-subtle: #2B2924; --border-control: #777266; --border-strong: #F4F2EC; --focus-ring: #C4B794; --accent: #C4B794; --accent-strong: #C4B794; --accent-subtle: #2A2619; --accent-hover: #D7CCAF; --on-accent: #000000; --primary-bg: #C4B794; --primary-bg-hover: #D7CCAF; --primary-fg: #000000; --secondary-bg: #1A1916; --secondary-bg-hover: #26241F; --secondary-fg: #F4F2EC; --success-fg: #5BC98A; --success-subtle: #0E2A1A; --success-solid: #2FA35F; --success-on-solid: #000000; --warning-fg: #F2B84B; --warning-subtle: #2E230D; --warning-solid: #F2B01E; --warning-on-solid: #000000; --danger-fg: #FF7B6E; --danger-subtle: #3A1411; --danger-solid: #F05A4D; --danger-on-solid: #000000; --orange-fg: #FF9A57; --orange-subtle: #36190A; --orange-solid: #F07A2E; --orange-on-solid: #000000; --info-fg: #72A7F2; --info-subtle: #0F1F36; --info-solid: #4C8DE8; --info-on-solid: #000000; --neutral-fg: #B3AEA2; --neutral-subtle: #22211D; --neutral-solid: #8F8A7E; --neutral-on-solid: #000000; --sla-ok-fg: #5BC98A; --sla-ok-bg: #0E2A1A; --sla-warn-fg: #F2B84B; --sla-warn-bg: #2E230D; --sla-breach-fg: #FF7B6E; --sla-breach-bg: #3A1411; --sla-paused-fg: #B3AEA2; --sla-paused-bg: #22211D; --priority-p1-bg: #F05A4D; --priority-p1-fg: #000000; --priority-p2-bg: #36190A; --priority-p2-fg: #FF9A57; --priority-p3-bg: #0F1F36; --priority-p3-fg: #72A7F2; --priority-p4-bg: #22211D; --priority-p4-fg: #B3AEA2; --health-green-fg: #5BC98A; --health-green-bg: #0E2A1A; --health-yellow-fg: #F2B84B; --health-yellow-bg: #2E230D; --health-red-fg: #FF7B6E; --health-red-bg: #3A1411; --elevation-raised: 0 1px 2px rgb(0 0 0 / 0.6), 0 0 0 1px rgb(255 255 255 / 0.04); --elevation-overlay: 0 8px 24px rgb(0 0 0 / 0.7), 0 0 0 1px rgb(255 255 255 / 0.06); --overlay-backdrop: rgb(0 0 0 / 0.64); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg-canvas: #000000; --bg-surface: #0F0F0E; --bg-raised: #1A1916; --bg-subtle: #1A1916; --bg-muted: #26241F; --bg-selected: #2A2619; --bg-inverse: #F4F2EC; --nav-bg: #0F0F0E; --nav-fg: #F4F2EC; --nav-fg-muted: #BDB8AC; --nav-item-hover-bg: #1A1916; --nav-item-active-bg: #26241F; --nav-item-active-fg: #C4B794; --nav-border: #2B2924; --text-primary: #F4F2EC; --text-secondary: #BDB8AC; --text-muted: #8F8A7E; --text-disabled: #5E5A51; --text-inverse: #000000; --text-link: #C4B794; --border-subtle: #2B2924; --border-control: #777266; --border-strong: #F4F2EC; --focus-ring: #C4B794; --accent: #C4B794; --accent-strong: #C4B794; --accent-subtle: #2A2619; --accent-hover: #D7CCAF; --on-accent: #000000; --primary-bg: #C4B794; --primary-bg-hover: #D7CCAF; --primary-fg: #000000; --secondary-bg: #1A1916; --secondary-bg-hover: #26241F; --secondary-fg: #F4F2EC; --success-fg: #5BC98A; --success-subtle: #0E2A1A; --success-solid: #2FA35F; --success-on-solid: #000000; --warning-fg: #F2B84B; --warning-subtle: #2E230D; --warning-solid: #F2B01E; --warning-on-solid: #000000; --danger-fg: #FF7B6E; --danger-subtle: #3A1411; --danger-solid: #F05A4D; --danger-on-solid: #000000; --orange-fg: #FF9A57; --orange-subtle: #36190A; --orange-solid: #F07A2E; --orange-on-solid: #000000; --info-fg: #72A7F2; --info-subtle: #0F1F36; --info-solid: #4C8DE8; --info-on-solid: #000000; --neutral-fg: #B3AEA2; --neutral-subtle: #22211D; --neutral-solid: #8F8A7E; --neutral-on-solid: #000000; --sla-ok-fg: #5BC98A; --sla-ok-bg: #0E2A1A; --sla-warn-fg: #F2B84B; --sla-warn-bg: #2E230D; --sla-breach-fg: #FF7B6E; --sla-breach-bg: #3A1411; --sla-paused-fg: #B3AEA2; --sla-paused-bg: #22211D; --priority-p1-bg: #F05A4D; --priority-p1-fg: #000000; --priority-p2-bg: #36190A; --priority-p2-fg: #FF9A57; --priority-p3-bg: #0F1F36; --priority-p3-fg: #72A7F2; --priority-p4-bg: #22211D; --priority-p4-fg: #B3AEA2; --health-green-fg: #5BC98A; --health-green-bg: #0E2A1A; --health-yellow-fg: #F2B84B; --health-yellow-bg: #2E230D; --health-red-fg: #FF7B6E; --health-red-bg: #3A1411; --elevation-raised: 0 1px 2px rgb(0 0 0 / 0.6), 0 0 0 1px rgb(255 255 255 / 0.04); --elevation-overlay: 0 8px 24px rgb(0 0 0 / 0.7), 0 0 0 1px rgb(255 255 255 / 0.06); --overlay-backdrop: rgb(0 0 0 / 0.64); } }