/* ═══════════════════════════════════════════════════════ TOKENS — Design system custom properties Single canonical :root block (merged from 4 sources) Last-defined value wins, all !important removed ═══════════════════════════════════════════════════════ */ :root { /* ── Warm neutral palette (final canonical values) ── */ --bg: #FAFAF8; --bg-2: #F5F4F1; --bg-3: #EDEBE7; --surface: #FFFFFF; --surface-2: #FAF9F7; --border: #E2E0DA; --border-2: #D1CEC6; --text: #1A1815; --text-2: #4E4B46; --text-3: #6E6A63; /* ── Primary — Teal-green ── */ --primary: #0F766E; --primary-light: #E8F5F0; --primary-bd: #A7D8CD; /* ── Alert: Red ── */ --red: #B91C1C; --red-light: #FEF2F2; --red-bd: #FECACA; /* ── Alert: Amber ── */ --amber: #A16207; --amber-light: #FEFCE8; --amber-bd: #FDE68A; /* ── Alert: Blue ── */ --blue: #1D4ED8; --blue-light: #EFF6FF; --blue-bd: #BFDBFE; /* ── Accent: Purple ── */ --purple: #6D28D9; --purple-light: #F5F3FF; --purple-bd: #C4B5FD; /* ── Accent: Teal ── */ --teal: #0F766E; --teal-light: #F0FDFA; --teal-bd: #99F6E4; /* ── Typography ── */ --display: 'Newsreader', serif; --body: 'Instrument Sans', sans-serif; --mono: 'IBM Plex Mono', monospace; /* ── Type scale (5 steps only) ── */ --fs-xs: .72rem; --fs-sm: .78rem; --fs-base: 1rem; --fs-lg: 1.1rem; --fs-xl: 1.35rem; /* ── Spacing scale ── */ --sp-1: .5rem; --sp-2: 1rem; --sp-3: 1.5rem; --sp-4: 2rem; --sp-5: 3rem; /* ── Radii ── */ --r: 10px; --r-lg: 14px; --r-xl: 20px; /* ── Shadows (modern, subtle) ── */ --shadow: 0 1px 3px rgba(0,0,0,.04); --shadow-md: 0 2px 8px rgba(0,0,0,.05); --shadow-lg: 0 4px 16px rgba(0,0,0,.06); --shadow-xl: 0 8px 32px rgba(0,0,0,.07); /* ── Dark overlay palette (terminal, tooltips, IV panel) ── */ --dark-bg: #1C1917; --dark-text: #E7E5E4; --dark-text-2: #D6D3D1; --dark-text-3: #A8A29E; --dark-muted: #78716C; --dark-dim: #57534E; --dark-gray: #6B7280; /* ── Transitions ── */ --ease: cubic-bezier(.16,1,.3,1); /* ── Layout ── */ --max-w: 1060px; } /* ═══════════════════════════════════════════════════════ DARK THEME — Toggled by [data-theme="dark"] on Overrides the core neutrals + lightens accent backgrounds. ═══════════════════════════════════════════════════════ */ html[data-theme="dark"] { --bg: #161310; --bg-2: #1C1917; --bg-3: #292524; --surface: #1C1917; --surface-2: #231F1C; --border: #3A3531; --border-2: #4A4540; --text: #F5F4F1; --text-2: #D6D3CC; /* --text-3 raised from #8A867F (3.2:1) to #B3AFA6 (~6.5:1) for WCAG AA body */ --text-3: #B3AFA6; --primary: #34D399; --primary-light: rgba(52, 211, 153, .1); --primary-bd: rgba(52, 211, 153, .35); --red: #F87171; --red-light: rgba(248, 113, 113, .1); --red-bd: rgba(248, 113, 113, .3); --amber: #FBBF24; --amber-light: rgba(251, 191, 36, .1); --amber-bd: rgba(251, 191, 36, .3); --blue: #60A5FA; --blue-light: rgba(96, 165, 250, .1); --blue-bd: rgba(96, 165, 250, .3); --purple: #A78BFA; --purple-light: rgba(167, 139, 250, .1); --purple-bd: rgba(167, 139, 250, .3); --teal: #2DD4BF; --teal-light: rgba(45, 212, 191, .1); --teal-bd: rgba(45, 212, 191, .3); --shadow: 0 1px 3px rgba(0,0,0,.3); --shadow-md: 0 2px 8px rgba(0,0,0,.4); --shadow-lg: 0 4px 16px rgba(0,0,0,.5); --shadow-xl: 0 8px 32px rgba(0,0,0,.6); } /* Prevent flash of light theme when dark is stored */ html[data-theme="dark"] body { background: var(--bg); color: var(--text); } /* Smooth transition when toggling */ html { transition: background-color .25s ease; } html[data-theme] body, html[data-theme] .sec, html[data-theme] .tool-frame, html[data-theme] .today-card, html[data-theme] .backup-modal, html[data-theme] .search-modal, html[data-theme] .lookup-card { transition: background-color .25s ease, border-color .25s ease, color .25s ease; } /* Dark theme: tighten a few places where hardcoded colors exist */ html[data-theme="dark"] .sis-banner-direct { background: rgba(147, 197, 253, .12); color: #93c5fd; } html[data-theme="dark"] .sis-banner-ethos { background: rgba(252, 211, 77, .12); color: #fcd34d; } html[data-theme="dark"] .sis-peoplesoft { background: rgba(196, 181, 253, .12); color: #c4b5fd; } html[data-theme="dark"] .sis-colleague { background: rgba(249, 168, 212, .12); color: #f9a8d4; } html[data-theme="dark"] .sis-unknown { background: var(--bg-3); color: var(--text-3); } html[data-theme="dark"] .ob-cat-produce { background: rgba(34, 197, 94, .12); color: #86efac; } html[data-theme="dark"] .ob-cat-plan { background: rgba(249, 168, 212, .12); color: #f9a8d4; } /* Images + backdrops that may need adjustment */ html[data-theme="dark"] .cvc-fab { box-shadow: 0 4px 16px rgba(0,0,0,.5); }