/* Compass design tokens — the single source of truth for themes, colors, typography and spacing. Themes switch via data-theme on . */ /* ---- Fonts (vendored, never CDN) ---- */ @font-face { font-family: 'IBM Plex Sans'; font-weight: 400; font-style: normal; font-display: swap; src: url('/vendor/fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF; } @font-face { font-family: 'IBM Plex Sans'; font-weight: 400; font-style: normal; font-display: swap; src: url('/vendor/fonts/ibm-plex-sans-latin-ext-400-normal.woff2') format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF; } @font-face { font-family: 'IBM Plex Sans'; font-weight: 500; font-style: normal; font-display: swap; src: url('/vendor/fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2'); unicode-range: U+0000-00FF; } @font-face { font-family: 'IBM Plex Sans'; font-weight: 500; font-style: normal; font-display: swap; src: url('/vendor/fonts/ibm-plex-sans-latin-ext-500-normal.woff2') format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF; } @font-face { font-family: 'IBM Plex Sans'; font-weight: 600; font-style: normal; font-display: swap; src: url('/vendor/fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF; } @font-face { font-family: 'IBM Plex Sans'; font-weight: 600; font-style: normal; font-display: swap; src: url('/vendor/fonts/ibm-plex-sans-latin-ext-600-normal.woff2') format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF; } @font-face { font-family: 'IBM Plex Sans'; font-weight: 700; font-style: normal; font-display: swap; src: url('/vendor/fonts/ibm-plex-sans-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF; } @font-face { font-family: 'IBM Plex Sans'; font-weight: 700; font-style: normal; font-display: swap; src: url('/vendor/fonts/ibm-plex-sans-latin-ext-700-normal.woff2') format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF; } @font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-style: normal; font-display: swap; src: url('/vendor/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF; } @font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-style: normal; font-display: swap; src: url('/vendor/fonts/ibm-plex-mono-latin-ext-400-normal.woff2') format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF; } @font-face { font-family: 'IBM Plex Mono'; font-weight: 500; font-style: normal; font-display: swap; src: url('/vendor/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); unicode-range: U+0000-00FF; } @font-face { font-family: 'IBM Plex Mono'; font-weight: 600; font-style: normal; font-display: swap; src: url('/vendor/fonts/ibm-plex-mono-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF; } @font-face { font-family: 'Material Symbols Outlined'; font-style: normal; font-weight: 100 700; font-display: block; src: url('/vendor/fonts/material-symbols-outlined.woff2') format('woff2'); } .msi { font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; font-size: 16px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; user-select: none; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20; } .msi.fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20; } /* ---- Theme tokens ---- */ :root { --bg: #F6F7F9; --surface: #FFFFFF; --ink: #14171F; --muted: #4E586B; --line: #DCE0E8; --line-strong: #C6CCD8; --accent: #2F6FEF; --danger: #C23B3B; --danger-bg: rgba(194, 59, 59, 0.08); --overlay: rgba(0, 0, 0, 0.35); --mark: rgba(47, 111, 239, 0.18); --prio-0: #7C8798; --prio-1: #2F6FEF; --prio-2: #D98324; --prio-3: #C23B3B; --font-ui: 'IBM Plex Sans', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; --fs-xs: 11px; --fs-sm: 12px; --fs-md: 13px; --fs-lg: 14px; --fs-title: 17px; --row-h: 36px; --sidebar-w: 236px; --drawer-w: 520px; --col-w: 240px; --radius: 6px; } html[data-theme='dark'] { --bg: #0E1116; --surface: #161A21; --ink: #E7EAF0; --muted: #A3ADBF; --line: #252B36; --line-strong: #333B4A; --accent: #7CB0FF; --danger: #E86B6B; --danger-bg: rgba(232, 107, 107, 0.12); --overlay: rgba(0, 0, 0, 0.55); --mark: rgba(124, 176, 255, 0.22); --prio-0: #9AA6BA; --prio-1: #7CB0FF; --prio-2: #F0B15C; --prio-3: #E86B6B; }