/* Bot Doctor workdesks — three style directions, each with light and dark modes. The app sets data-style (ink | signal | studio) and data-mode (light | dark) on . Components only read these tokens. Fonts are self-hosted variable fonts (OFL, see assets/fonts). */ /* ── Ink (default): monochrome chrome; the open desk's own color is the accent ── */ :root, :root[data-style="ink"] { --bg: #f5f5f3; --panel: #ffffff; --surface: #f0f0ed; --hover: #ebebe7; --line: #e4e4df; --line-strong: #d2d2cc; --panel-line: #e4e4df; --text: #16181d; --muted: #5c616b; --soft: #858993; --sidebar: #f5f5f3; --sidebar-text: #16181d; --sidebar-muted: #5c616b; --sidebar-hover: #ebebe7; --sidebar-active: #ffffff; --sidebar-line: #e4e4df; --primary: #16181d; --primary-ink: #ffffff; --accent: var(--desk, #16181d); --accent-soft: color-mix(in srgb, var(--desk, #16181d) 10%, #ffffff); --ok: #1d7a4c; --ok-soft: #e2f2e9; --warn: #8f5b00; --warn-soft: #fbefd9; --bad: #b42318; --bad-soft: #fde7e4; --shadow: 0 14px 36px rgba(22, 24, 29, .12); --card-shadow: none; --display: "Geist", ui-sans-serif, system-ui, sans-serif; --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; --label-font: var(--mono); --num-font: var(--display); --heading-weight: 600; --heading-track: -.025em; --h1: 1.75rem; --radius: 8px; --radius-lg: 12px; --btn-radius: 8px; --mark-radius: 8px; --mark-dot: transparent; --mark-dot-radius: 2px; --active-shadow: 0 1px 2px rgba(22, 24, 29, .08); color-scheme: light; } :root[data-style="ink"][data-mode="dark"], :root:not([data-style])[data-mode="dark"] { --bg: #0f1012; --panel: #16171a; --surface: #1c1d21; --hover: #222328; --line: #26282d; --line-strong: #363840; --panel-line: #26282d; --text: #edeef0; --muted: #a3a7af; --soft: #7b7f88; --sidebar: #0f1012; --sidebar-text: #edeef0; --sidebar-muted: #a3a7af; --sidebar-hover: #1c1d21; --sidebar-active: #1f2024; --sidebar-line: #26282d; --primary: #edeef0; --primary-ink: #16181d; --accent: color-mix(in srgb, var(--desk, #edeef0) 72%, #ffffff); --accent-soft: color-mix(in srgb, var(--desk, #edeef0) 20%, #16171a); --ok: #5cc592; --ok-soft: #13271d; --warn: #f0b45a; --warn-soft: #2b2110; --bad: #f2877b; --bad-soft: #331814; --shadow: 0 18px 44px rgba(0, 0, 0, .5); --active-shadow: none; color-scheme: dark; } /* ── Signal: the clinic console. Dark rail, amber action, big mono readouts ── */ :root[data-style="signal"] { --bg: #eef1f4; --panel: #ffffff; --surface: #f2f5f8; --hover: #e6ebf1; --line: #dce2ea; --line-strong: #c5cedb; --panel-line: #dce2ea; --text: #0e1a2b; --muted: #51607a; --soft: #7c899f; --sidebar: #0e1a2b; --sidebar-text: #e6ecf4; --sidebar-muted: #8c9bb3; --sidebar-hover: #16263c; --sidebar-active: #1d3150; --sidebar-line: #0e1a2b; --primary: #f2a516; --primary-ink: #1a1203; --accent: #b87700; --accent-soft: #fdf0d6; --ok: #0f7b5a; --ok-soft: #dcf3e9; --warn: #a15c00; --warn-soft: #fdebd2; --bad: #c0362c; --bad-soft: #fbe2df; --shadow: 0 14px 36px rgba(14, 26, 43, .16); --card-shadow: none; --display: "Red Hat Display", ui-sans-serif, system-ui, sans-serif; --sans: "Red Hat Text", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "Red Hat Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; --label-font: var(--mono); --num-font: var(--mono); --heading-weight: 700; --heading-track: -.015em; --h1: 1.6rem; --radius: 5px; --radius-lg: 7px; --btn-radius: 5px; --mark-radius: 5px; --mark-dot: #f2a516; --mark-dot-radius: 50%; --active-shadow: inset 3px 0 0 #f2a516; color-scheme: light; } :root[data-style="signal"][data-mode="dark"] { --bg: #0a121e; --panel: #0f1928; --surface: #132033; --hover: #182640; --line: #1c2a40; --line-strong: #2a3b57; --panel-line: #1c2a40; --text: #e6ecf4; --muted: #9aa9c0; --soft: #6f7f99; --sidebar: #060c15; --sidebar-text: #e6ecf4; --sidebar-muted: #7f8ea6; --sidebar-hover: #0f1a2a; --sidebar-active: #14233a; --sidebar-line: #132034; --primary: #f5b02e; --primary-ink: #1a1203; --accent: #f5b02e; --accent-soft: #2a2110; --ok: #3dd6a0; --ok-soft: #0d2a21; --warn: #f5b02e; --warn-soft: #2a2110; --bad: #ff7a6b; --bad-soft: #331719; --shadow: 0 18px 44px rgba(0, 0, 0, .55); color-scheme: dark; } /* ── Studio: warm and approachable for volunteer teams. Soft cards, plum action ── */ :root[data-style="studio"] { --bg: #f3f0eb; --panel: #ffffff; --surface: #f7f4ef; --hover: #ede8e1; --line: #e7e1d8; --line-strong: #d6cec2; --panel-line: transparent; --text: #221a2b; --muted: #6a6172; --soft: #948b99; --sidebar: #f3f0eb; --sidebar-text: #221a2b; --sidebar-muted: #6a6172; --sidebar-hover: #ebe5dd; --sidebar-active: #ffffff; --sidebar-line: transparent; --primary: #5b2a86; --primary-ink: #ffffff; --accent: #5b2a86; --accent-soft: #efe5f7; --ok: #2f7a4f; --ok-soft: #e1f1e7; --warn: #95600a; --warn-soft: #f8ecd4; --bad: #b3372b; --bad-soft: #f9e2df; --shadow: 0 18px 44px rgba(34, 26, 43, .14); --card-shadow: 0 1px 2px rgba(34, 26, 43, .05), 0 10px 28px rgba(34, 26, 43, .06); --display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif; --sans: "Public Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; --label-font: var(--sans); --num-font: var(--display); --heading-weight: 650; --heading-track: -.02em; --h1: 2rem; --radius: 12px; --radius-lg: 20px; --btn-radius: 999px; --mark-radius: 12px; --mark-dot: #5b2a86; --mark-dot-radius: 50%; --active-shadow: 0 1px 2px rgba(34, 26, 43, .06), 0 6px 16px rgba(34, 26, 43, .06); color-scheme: light; } :root[data-style="studio"][data-mode="dark"] { --bg: #17131c; --panel: #211b28; --surface: #28212f; --hover: #2f2738; --line: #342b3e; --line-strong: #463a51; --panel-line: #2c2435; --text: #f1ecf4; --muted: #b4a9bd; --soft: #867b90; --sidebar: #17131c; --sidebar-text: #f1ecf4; --sidebar-muted: #b4a9bd; --sidebar-hover: #221c29; --sidebar-active: #2a2232; --sidebar-line: transparent; --primary: #caa4f1; --primary-ink: #1e1227; --accent: #caa4f1; --accent-soft: #33253f; --ok: #6fd39a; --ok-soft: #15291d; --warn: #f0c06a; --warn-soft: #2e2413; --bad: #f59185; --bad-soft: #36191a; --shadow: 0 18px 44px rgba(0, 0, 0, .5); --card-shadow: none; --active-shadow: none; --mark-dot: #caa4f1; color-scheme: dark; }