/* Agent Desk tokens. One visual language shared with the Ridley personal desk: Bot Doctor's restrained terminal feel, IBM Plex type, thin rules, no blue. Two modes only: warm white Light and neutral gray Dark. The app sets data-mode on . Components only read these tokens. Fonts are self-hosted IBM Plex (OFL, see assets/fonts). */ @font-face { font-family: "Plex Sans"; src: url("assets/fonts/plex-sans-400.ttf") format("truetype"); font-weight: 400; font-display: swap; } @font-face { font-family: "Plex Sans"; src: url("assets/fonts/plex-sans-500.ttf") format("truetype"); font-weight: 500 700; font-display: swap; } @font-face { font-family: "Plex Mono"; src: url("assets/fonts/plex-mono-400.ttf") format("truetype"); font-weight: 400; font-display: swap; } @font-face { font-family: "Plex Mono"; src: url("assets/fonts/plex-mono-500.ttf") format("truetype"); font-weight: 500 700; font-display: swap; } /* ── Light: warm white ── */ :root { --bg: #f4f1e8; --panel: #fbf9f3; --surface: #eeebe2; --hover: #e8e4d9; --line: #dcd8cd; --line-strong: #c3beb2; --panel-line: #dcd8cd; --text: #24231f; --muted: #5c5a51; --soft: #6c695f; --sidebar: #f4f1e8; --sidebar-text: #24231f; --sidebar-muted: #5c5a51; --sidebar-hover: #ebe7dc; --sidebar-active: #e3dfd3; --sidebar-line: #dcd8cd; --primary: #292823; --primary-ink: #faf8f1; --primary-hover: #444138; --accent: #292823; --accent-soft: #e8e4d9; --focus: #5c5a51; --field-line: #8f8a7e; --ok: #2f6b45; --warn: #7a5200; --bad: #9c3528; --mark-ink: #c2412c; --shadow: 0 12px 32px rgba(36, 35, 31, .14); --sans: "Plex Sans", "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "Plex Mono", "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; --display: var(--mono); --label-font: var(--mono); --num-font: var(--mono); --heading-weight: 500; --heading-track: -.03em; --h1: 1.75rem; --radius: 2px; --radius-lg: 2px; --btn-radius: 2px; --mark-radius: 2px; color-scheme: light; } /* ── Dark: neutral gray ── */ :root[data-mode="dark"] { --bg: #111111; --panel: #191919; --surface: #1d1d1c; --hover: #232322; --line: #2e2e2c; --line-strong: #484741; --panel-line: #2e2e2c; --text: #e8e6e1; --muted: #aaa8a2; --soft: #8f8d86; --sidebar: #111111; --sidebar-text: #e8e6e1; --sidebar-muted: #aaa8a2; --sidebar-hover: #1b1b1a; --sidebar-active: #262625; --sidebar-line: #2e2e2c; --primary: #e5e2d9; --primary-ink: #151515; --primary-hover: #f4f2eb; --accent: #e5e2d9; --accent-soft: #232322; --focus: #aaa8a2; --field-line: #6a6862; --ok: #8fc79f; --warn: #e0b86f; --bad: #ffb4a5; --mark-ink: #ef6a52; --shadow: 0 16px 40px rgba(0, 0, 0, .55); color-scheme: dark; }