/* ============================================================================ TMS design tokens — the single source of truth for colour, type and spacing. Rules: · No raw hex values anywhere else in the codebase. Use var(--tms-*). · Semantic colours (danger / warn / ok / info) are separate from the accent and never double as branding. · Dark mode is opt-in: tms.theme.toggle() stamps data-theme on . We deliberately do NOT follow prefers-color-scheme, so nobody's portal changes appearance without them asking for it. ========================================================================== */ :root { /* Tells the browser which way to paint the bits of a control we cannot reach from CSS: the date input's calendar picker icon, number-input spinners, native select arrows, scrollbars and autofill. Without it those stay in the light-mode palette and render as black glyphs on our dark surfaces. This is an explicit value, not `light dark` — the theme is our own data-theme attribute, not the OS preference. */ color-scheme: light; /* --- surfaces ------------------------------------------------------- */ --tms-bg: #F4F5F8; --tms-surface: #FFFFFF; --tms-surface-2: #EDEFF3; --tms-surface-3: #E4E7ED; --tms-border: #DEE2E9; --tms-border-strong: #C6CCD7; /* --- text ----------------------------------------------------------- */ --tms-text: #1A1922; --tms-text-2: #575A66; --tms-text-3: #6F737F; --tms-text-invert: #FFFFFF; /* --- brand accent (from the existing #177373 sidebar teal) ---------- */ --tms-accent: #0E7C74; --tms-accent-dark: #0A5F59; --tms-accent-tint: #DFF0EE; --tms-accent-line: #9DCDC8; /* Secondary ink for text ON --tms-accent-tint. --tms-accent itself is a fill colour and only reaches 4.29:1 there, so small text needs its own value; this measures 5.2:1 against the tint while staying lighter than --tms-accent-dark (6.4:1), which keeps the number/label hierarchy. */ --tms-accent-ink-2: #0D6E68; /* Ink for text sitting ON the accent. White works on the light-mode teal; the dark-mode accent is brightened for use as text, so filling a button with it needs dark ink instead — white would land at 2.7:1. */ --tms-on-accent: #FFFFFF; --tms-on-danger: #FFFFFF; /* --- navigation rail (from the existing #3f3b4d plum) --------------- */ --tms-rail: #2C2937; --tms-rail-2: #3A364A; --tms-rail-text: #B9B5C6; /* The rail is dark in BOTH themes, so anything accent-coloured sitting on it needs the bright accent regardless of theme. Using --tms-accent here puts dark teal on dark plum at 2.8:1 in light mode — the active-nav indicator all but disappears. These two are intentionally NOT overridden below. */ --tms-rail-accent: #31B0A3; --tms-rail-accent-ink: #06201D; /* --- semantic ------------------------------------------------------- */ --tms-danger: #BE3A3A; --tms-danger-tint: #FBE9E9; --tms-danger-line: #EDBFBF; --tms-warn: #A66E12; --tms-warn-tint: #FAF1DE; --tms-warn-line: #E4CB9A; --tms-ok: #2A7449; --tms-ok-tint: #E2F1E8; --tms-ok-line: #A9CFBA; --tms-info: #35679F; --tms-info-tint: #E6EEF9; --tms-info-line: #B0C7E4; --tms-progress: #63499E; --tms-progress-tint:#EDE8F8; --tms-progress-line:#C3B4E3; /* --- avatar palette (deterministic per user, see tms.avatarColor) ---- */ --tms-av-1: #3C6E9E; --tms-av-2: #0E7C74; --tms-av-3: #8A5A2B; --tms-av-4: #7A4A9E; --tms-av-5: #A63F4F; --tms-av-6: #3F7A52; /* --- elevation ------------------------------------------------------ */ --tms-shadow-1: 0 1px 2px rgba(26,25,34,.06), 0 1px 1px rgba(26,25,34,.04); --tms-shadow-2: 0 4px 14px rgba(26,25,34,.09), 0 1px 3px rgba(26,25,34,.06); --tms-shadow-3: 0 18px 48px rgba(26,25,34,.18), 0 2px 8px rgba(26,25,34,.10); /* --- type ----------------------------------------------------------- */ --tms-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --tms-font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace; --tms-fs-micro: 11px; /* uppercase labels */ --tms-fs-cap: 12px; /* captions, meta */ --tms-fs-data: 13px; /* table cells, dense UI */ --tms-fs-body: 14px; --tms-fs-sub: 16px; --tms-fs-title: 20px; /* --- geometry ------------------------------------------------------- */ --tms-r-sm: 4px; --tms-r: 6px; --tms-r-lg: 10px; --tms-rail-w: 60px; /* Height of the rail once it becomes a bottom bar on a phone. Named because the canvas has to reserve exactly this much room at the bottom; a literal in two places drifts and the last row of a list ends up under the bar. */ --tms-railbar-h: 54px; --tms-topbar-h: 52px; /* --- motion --------------------------------------------------------- */ --tms-ease: cubic-bezier(.4, 0, .2, 1); --tms-fast: .14s; --tms-slow: .32s; /* --- layering ------------------------------------------------------- */ --tms-z-rail: 60; --tms-z-topbar: 55; --tms-z-dropdown:800; --tms-z-modal: 900; --tms-z-toast: 950; } :root[data-theme="dark"] { color-scheme: dark; --tms-bg: #141319; --tms-surface: #1C1B23; --tms-surface-2: #24232D; --tms-surface-3: #2D2B38; --tms-border: #2E2C39; --tms-border-strong: #413E51; --tms-text: #E9E8EF; --tms-text-2: #A3A0B0; --tms-text-3: #918EA0; --tms-accent: #31B0A3; --tms-accent-dark: #49C6B9; --tms-accent-tint: #12332F; --tms-accent-line: #2A6A64; /* On the dark tint the plain accent already measures 5.1:1, so it doubles as the secondary ink; --tms-accent-dark stays the brighter primary at 6.5:1. */ --tms-accent-ink-2: #31B0A3; --tms-on-accent: #06201D; --tms-on-danger: #1F0D0D; --tms-rail: #100F15; --tms-rail-2: #1F1D28; --tms-rail-text: #8E8A9C; --tms-danger: #E87C7C; --tms-danger-tint: #37201F; --tms-danger-line: #5E3434; --tms-warn: #D6A44E; --tms-warn-tint: #332818; --tms-warn-line: #59431F; --tms-ok: #5FBB86; --tms-ok-tint: #173023; --tms-ok-line: #2C5540; --tms-info: #79A8DD; --tms-info-tint: #1A2635; --tms-info-line: #31496A; --tms-progress: #A78FD8; --tms-progress-tint:#231D33; --tms-progress-line:#42375F; /* Same deep palette as light: these carry white initials, so they must stay dark enough to read. Brightening them for dark mode would drop them to ~3:1. */ --tms-av-1: #3C6E9E; --tms-av-2: #0E7C74; --tms-av-3: #8A5A2B; --tms-av-4: #7A4A9E; --tms-av-5: #A63F4F; --tms-av-6: #3F7A52; --tms-shadow-1: 0 1px 2px rgba(0,0,0,.4); --tms-shadow-2: 0 4px 14px rgba(0,0,0,.45); --tms-shadow-3: 0 18px 48px rgba(0,0,0,.6); }