/* ============================================================ Design tokens. Single source of truth: every color is a raw LCH triplet (lightness chroma hue). Semantic --color-* names derive from the triplets via oklch(). To switch theme, redefine the triplets only — every derived value updates automatically. Layers: declared in bare.html. tokens.css ships at :root level (no layer) so the variables are available to Bootstrap, custom.css, and inline styles alike. ============================================================ */ :root { /* ----- Spacing ------------------------------------------ */ --inline-space: 1ch; --inline-space-half: calc(var(--inline-space) / 2); --inline-space-double: calc(var(--inline-space) * 2); --block-space: 1rem; --block-space-half: calc(var(--block-space) / 2); --block-space-double: calc(var(--block-space) * 2); /* ----- Type --------------------------------------------- */ --font-sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --text-xx-small: 0.65rem; --text-x-small: 0.75rem; --text-small: 0.85rem; --text-normal: 1rem; --text-medium: 1.1rem; --text-large: 1.3rem; --text-x-large: 1.6rem; --text-xx-large: 2.2rem; @media (max-width: 639px) { --text-x-small: 0.85rem; --text-small: 0.95rem; --text-normal: 1.05rem; --text-medium: 1.15rem; } /* ----- Z-index hierarchy -------------------------------- */ --z-popup: 10; --z-nav: 20; --z-flash: 30; --z-tooltip: 40; --z-bar: 50; --z-tray: 51; --z-sidebar: 1040; --z-modal: 1050; --z-modal-flyout: 1055; --z-toast: 1080; /* ----- Component sizes ---------------------------------- */ /* Main menu (+ brand strip): 25% wider than legacy 188px. */ --sidebar-width: calc(188px * 1.25); --sidebar-collapsed-width: 60px; --topnav-height: 60px; --kanban-column-width: 375px; /* ============================================================ OKLCH triplets — light mode (default) Stops per hue: darkest -> darker -> dark -> medium -> light -> lighter -> lightest Use medium for solid fills, dark for text-on-light, light/lighter for tinted surfaces, lightest for hover bg. ============================================================ */ --lch-black: 0% 0 0; --lch-white: 100% 0 0; /* Canvas / ink: themable surface + text */ --lch-canvas: var(--lch-white); --lch-ink-inverted: var(--lch-white); /* Neutral grays (cool blue-gray tilt) */ --lch-ink-darkest: 22% 0.012 248; --lch-ink-darker: 36% 0.010 248; --lch-ink-dark: 52% 0.008 248; --lch-ink-medium: 66% 0.006 248; --lch-ink-light: 84% 0.004 248; --lch-ink-lighter: 92% 0.003 248; --lch-ink-lightest: 96% 0.002 248; /* Brand teal — primary */ --lch-teal-darkest: 22% 0.040 200; --lch-teal-darker: 32% 0.060 200; --lch-teal-dark: 38% 0.070 200; /* approx #004F59 */ --lch-teal-medium: 56% 0.090 200; --lch-teal-light: 78% 0.060 200; --lch-teal-lighter: 90% 0.030 200; --lch-teal-lightest: 96% 0.014 200; /* Brand orange — accent */ --lch-orange-darkest: 32% 0.110 50; --lch-orange-darker: 50% 0.150 50; --lch-orange-dark: 64% 0.180 50; --lch-orange-medium: 73% 0.165 60; /* approx #EE964C */ --lch-orange-light: 86% 0.080 60; --lch-orange-lighter: 93% 0.040 60; --lch-orange-lightest: 97% 0.020 60; /* Status: red / green / yellow (used by signals/badges) */ --lch-red-darkest: 26% 0.105 30; --lch-red-darker: 40% 0.154 32; --lch-red-dark: 56% 0.180 34; --lch-red-medium: 66% 0.200 36; --lch-red-light: 84% 0.080 38; --lch-red-lighter: 92% 0.030 40; --lch-red-lightest: 96% 0.014 42; --lch-green-darkest: 26% 0.071 149; --lch-green-darker: 40% 0.120 148; --lch-green-dark: 55% 0.162 147; --lch-green-medium: 66% 0.190 146; --lch-green-light: 84% 0.077 145; --lch-green-lighter: 92% 0.044 144; --lch-green-lightest: 96% 0.022 143; --lch-yellow-darkest: 30% 0.073 80; --lch-yellow-darker: 50% 0.120 85; --lch-yellow-dark: 64% 0.156 90; --lch-yellow-medium: 80% 0.184 95; --lch-yellow-light: 90% 0.120 100; --lch-yellow-lighter: 95% 0.060 100; --lch-yellow-lightest: 98% 0.030 100; /* ============================================================ Semantic color tokens — derived from the LCH triplets above. Use these everywhere. Never hard-code a hex in custom.css. ============================================================ */ --color-black: oklch(var(--lch-black)); --color-white: oklch(var(--lch-white)); --color-canvas: oklch(var(--lch-canvas)); --color-ink: oklch(var(--lch-ink-darkest)); --color-ink-darker: oklch(var(--lch-ink-darker)); --color-ink-dark: oklch(var(--lch-ink-dark)); --color-ink-medium: oklch(var(--lch-ink-medium)); --color-ink-light: oklch(var(--lch-ink-light)); --color-ink-lighter: oklch(var(--lch-ink-lighter)); --color-ink-lightest: oklch(var(--lch-ink-lightest)); --color-ink-inverted: oklch(var(--lch-ink-inverted)); --color-brand: oklch(var(--lch-teal-dark)); /* #004F59 */ --color-brand-text: oklch(var(--lch-teal-darker)); --color-brand-bg: oklch(var(--lch-teal-lightest)); --color-brand-hover: oklch(var(--lch-teal-lighter)); --color-accent: oklch(var(--lch-orange-medium)); /* #EE964C */ --color-accent-text: oklch(var(--lch-orange-darker)); --color-accent-bg: oklch(var(--lch-orange-lightest)); --color-link: var(--color-brand); --color-link-hover: oklch(var(--lch-teal-darker)); --color-positive: oklch(var(--lch-green-dark)); --color-negative: oklch(var(--lch-red-dark)); --color-warning: oklch(var(--lch-yellow-dark)); /* ----- App chrome surfaces -- light palette (warm cream) -- */ --color-page-bg: #FBF5CB; /* page background = surface */ --color-surface: #FBF5CB; /* cards / modals share page tone */ --color-surface-muted: #FBE5D2; /* peach tint */ --color-sidebar-bg: #FDF8DC; /* warm cream (menu) */ --color-sidebar-text: #EE964C; /* orange text on cream */ --color-sidebar-hover: #FBE5D2; /* peach hover */ --color-sidebar-brand-bg: #EE964C; /* orange logo block */ --color-toolbar-bg: #FDF8DC; /* warm cream (menu) */ --color-border: #FBE5D2; --color-border-strong: #EE964C; --color-divider: #FBE5D2; /* Highlight surface (spec): #FEFCEE */ --color-surface-highlight: #FEFCEE; /* Kanban lane shell + scrollbar thumb (light); path buttons + sibling tabs use this fill with accent border (custom.css). */ --color-kanban-lane-light: #FAF1B9; /* Breadcrumb (Orange theme): orange text + separator */ --color-breadcrumb: var(--color-accent); /* Kanban cards (Orange theme spec): #FEFCEE */ --color-kanban-card-bg: var(--color-surface-highlight); --color-kanban-card-text: var(--color-brand); --color-node-card-text: var(--color-kanban-card-text); /* Path / lane “head” row (Scopes, planning column head): warmer cream #FDF8DC — same as toolbar */ --color-kanban-header-card-bg: var(--color-toolbar-bg); /* ----- Lane / column tints ------------------------------ */ --color-lane-bg: #FBF5CB; --color-lane-header: #FBE5D2; /* ----- Bootstrap overrides -------------------------------- Bootstrap reads --bs-card-bg / --bs-body-bg from :root, so binding them to our tokens themes Bootstrap components too. */ --bs-card-bg: var(--color-surface); --bs-body-bg: var(--color-page-bg); /* ----- Shadows ------------------------------------------ */ --shadow-sm: 0 1px 2px oklch(var(--lch-black) / 8%); --shadow: 0 1px 3px oklch(var(--lch-black) / 10%), 0 2px 6px oklch(var(--lch-black) / 6%); --shadow-lg: 0 0 0 1px oklch(var(--lch-black) / 5%), 0 0.4em 0.4em oklch(var(--lch-black) / 5%), 0 0.8em 0.8em oklch(var(--lch-black) / 5%); /* ----- Focus ring --------------------------------------- */ --focus-ring: 2px solid var(--color-link); --focus-ring-offset: 1px; } /* ============================================================ Dark theme: redefine LCH triplets only. Every --color-* token re-derives automatically through oklch(var(--lch-*)). ============================================================ */ html[data-theme="dark"] { /* Inks invert so default text reads light on dark surfaces */ --lch-ink-darkest: 96% 0.003 248; --lch-ink-darker: 86% 0.005 248; --lch-ink-dark: 74% 0.007 248; --lch-ink-medium: 62% 0.009 248; --lch-ink-light: 40% 0.012 248; --lch-ink-lighter: 30% 0.014 248; --lch-ink-lightest: 25% 0.016 248; /* App chrome -- dark palette (teal) -- exact hex match */ --color-page-bg: #004F59; /* dark teal page bg */ --color-surface: #DFE9EA; /* cards / sibling tabs: light teal */ --color-surface-muted: #BFD3D5; /* slightly darker teal (hover) */ --color-toolbar-bg: #40878C; /* mid teal (top bar); sidebar matches */ --color-sidebar-bg: var(--color-toolbar-bg); --color-sidebar-text: #DFE9EA; /* light teal text on mid teal */ --color-sidebar-hover: #80A7AC; /* lighter strip on hover (was same as old bg) */ --color-sidebar-brand-bg: #EE964C; /* orange logo block */ --color-border: #BFD3D5; --color-border-strong: #DFE9EA; --color-divider: #DFE9EA; --color-lane-bg: #80A7AC; /* lighter teal lane */ --color-lane-header: #BFD3D5; /* light teal header */ /* Highlight surface (use regular surface in dark theme) */ --color-surface-highlight: var(--color-surface); /* Breadcrumb (Blue theme spec): #40878C */ --color-breadcrumb: var(--color-toolbar-bg); /* Kanban cards (Blue theme spec): #DFE9EA */ --color-kanban-card-bg: var(--color-surface); --color-kanban-card-text: var(--color-brand); --color-node-card-text: var(--color-kanban-card-text); --color-kanban-header-card-bg: var(--color-surface-muted); --shadow: 0 0 0 1px oklch(var(--lch-black) / 30%), 0 0.4em 0.8em oklch(var(--lch-black) / 40%); } /* Dark theme is opt-in only via data-theme="dark" on . We deliberately do NOT honor prefers-color-scheme: that would auto-flip the chrome for users running dark mode at the OS level without ever opting in inside the app. */