/* * switchboard — tokens.css * Pure design tokens for the charm-web design language (day/night, monospace-first). * Governing: ADR-0018 (charm-web design language), SPEC-0015 REQ "Design Token System". * * Two themes over one semantic vocabulary: * - day (DEFAULT) — lavender paper lit by the same brand hues, deepened for contrast. * - night — blue-black void, ANSI neon, glow-as-elevation. * * This file holds custom properties and @font-face only. Component classes live in * switchboard.css; the docs site keeps its own FROZEN copy of the retired Operator tokens * (ADR-0018: decoupling over co-evolution), so nothing outside the app consumes this file. * * Theme switching: day is the default; night applies via prefers-color-scheme unless the * document opts out with , and always with . * The pre-paint boot script (static/js/theme-boot.js) stamps data-theme from localStorage * before first paint (SPEC-0015 REQ "Theme Toggle"). */ /* ---- vendored typefaces (OFL; see static/fonts/README.md) — never a CDN ---- * JetBrains Mono is the workhorse (body/UI/code); Space Mono is the display voice * (wordmark, titles). Both are SIL OFL. The woff2 binaries are vendored under * static/fonts/ and embedded; fonts_test.go asserts glyph coverage when present. */ @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/jetbrains-mono-400.woff2") format("woff2"); } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/jetbrains-mono-500.woff2") format("woff2"); } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/jetbrains-mono-700.woff2") format("woff2"); } @font-face { font-family: "Space Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/space-mono-400.woff2") format("woff2"); } @font-face { font-family: "Space Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/space-mono-700.woff2") format("woff2"); } /* ---- day (lavender paper) — the default theme ---- */ :root { /* type — monospace-first (ADR-0018): no non-mono families anywhere */ --sb-font-display: "Space Mono", "JetBrains Mono", ui-monospace, monospace; --sb-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; /* surfaces */ --sb-canvas: #EEEDFA; --sb-panel: #F6F5FD; --sb-raised-hi: #FDFDFF; --sb-raised-lo: #F1F0FA; --sb-header-strip: #ECEAF9; --sb-input-bg: #FDFDFF; --sb-code-bg: #ECEAF9; /* lines */ --sb-border: #CCC7EA; --sb-border-strong: #A79FDB; --sb-divider: #E2DFF4; --sb-input-border: #A79FDB; --sb-input-border-soft: #CCC7EA; --sb-grid: rgba(108, 70, 234, 0.06); /* ink */ --sb-ink: #17162B; --sb-text: #232150; --sb-body: #333155; --sb-secondary: #4C4980; --sb-muted: #625F92; --sb-faint: #908DBA; --sb-faint-2: #8A87B5; --sb-faint-3: #817EAD; /* brand accents (charm purple / hot pink / neon cyan-mint-gold-coral, deepened for day) */ --sb-primary: #6C46EA; --sb-primary-hover: #5A36D6; --sb-primary-disabled: #B7A8EC; --sb-on-primary: #FFFFFF; --sb-accent: #E43A8C; --sb-accent-bright: #B92368; --sb-accent-logo: #E43A8C; --sb-accent-chart: #8F84D6; --sb-ring: #0793B4; --sb-cyan: #0793B4; --sb-mint: #059669; --sb-gold: #B4770A; --sb-coral: #DC4433; --sb-lilac: #6D4FD0; /* trust modes (ADR-0003: signed · token · open · queue) */ --sb-trust-signed: #056A4F; --sb-trust-signed-bg: #D6F2E4; --sb-trust-signed-dot: #059669; --sb-trust-token: #7A5305; --sb-trust-token-bg: #F6ECD1; --sb-trust-token-dot: #B4770A; --sb-trust-open: #A62B1F; --sb-trust-open-bg: #F8DDD6; --sb-trust-open-dot: #DC4433; --sb-trust-queue: #075E75; --sb-trust-queue-bg: #D7EDF4; --sb-trust-queue-dot: #0793B4; /* todo status */ --sb-status-pending: #075E75; --sb-status-pending-bg: #D7EDF4; --sb-status-claimed: #7A5305; --sb-status-claimed-bg: #F6ECD1; --sb-status-done: #056A4F; --sb-status-done-bg: #D6F2E4; --sb-status-failed: #A62B1F; --sb-status-failed-bg: #F8DDD6; --sb-status-neutral: #625F92; /* chips & special */ --sb-chip-verb: #056A4F; --sb-chip-verb-bg: #DFF2E9; --sb-chip-verb-border: #7CC9AC; --sb-chip-queue: #075E75; --sb-chip-queue-bg: #DDF0F6; --sb-chip-queue-border: #63B6CD; --sb-dedup: #6D4FD0; --sb-dedup-bg: #E7E0F8; --sb-live: #059669; --sb-live-bg: #D6F2E4; --sb-toast-bg: #17162B; --sb-toast-text: #F4F4FF; --sb-scrim: rgba(38, 34, 74, 0.45); --sb-nav-active-bg: #E0DDF4; --sb-row-hover: #ECEAF9; --sb-row-flash: #E4E0F6; --sb-alert-tint: #F6E4E0; --sb-lease-track: #E0DDF4; /* shape — Lip Gloss soft-square feel: chips flat, panels --radius-md-adjacent (ADR-0018) */ --sb-radius-card: 8px; --sb-radius-modal: 12px; --sb-radius-btn: 5px; --sb-radius-chip: 3px; --sb-radius-pill: 999px; /* elevation — day glow softens into colored shadow (ADR-0018: glow over blur-shadow) */ --sb-shadow-modal: 0 24px 60px -18px rgba(35, 30, 80, 0.25); --sb-shadow-drawer: -16px 0 40px -18px rgba(35, 30, 80, 0.22); --sb-shadow-toast: 0 8px 24px -10px rgba(35, 30, 80, 0.3); --sb-glow-primary: 0 2px 10px rgba(108, 70, 234, 0.3); --sb-glow-accent: 0 2px 10px rgba(228, 58, 140, 0.3); --sb-glow-cyan: 0 2px 10px rgba(7, 147, 180, 0.3); --sb-glow-mint: 0 2px 10px rgba(5, 150, 105, 0.28); --sb-glow-soft: 0 4px 24px rgba(108, 70, 234, 0.14); --sb-focus-ring: 0 0 0 3px rgba(7, 147, 180, 0.3); /* motion — springy and quick (Harmonica-inspired; ADR-0018) */ --sb-ease: cubic-bezier(0.16, 1, 0.3, 1); --sb-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --sb-dur-enter: 0.2s; --sb-dur-row: 0.4s; --sb-dur-pulse: 1.4s; } /* ---- night (blue-black, neon) — shared value set ---- */ /* Applied via prefers-color-scheme (unless data-theme="day") and via data-theme="night". */ @media (prefers-color-scheme: dark) { :root:not([data-theme="day"]) { --sb-canvas: #08080F; --sb-panel: #15152A; --sb-raised-hi: #1E1E38; --sb-raised-lo: #10101F; --sb-header-strip: #0E0E1A; --sb-input-bg: #0A0A14; --sb-code-bg: #0E0E1A; --sb-border: #3A3A66; --sb-border-strong: #55558F; --sb-divider: #262645; --sb-input-border: #55558F; --sb-input-border-soft: #3A3A66; --sb-grid: rgba(78, 230, 255, 0.06); --sb-ink: #F4F4FF; --sb-text: #E4E4F5; --sb-body: #C9C9E8; --sb-secondary: #A9A9CE; --sb-muted: #8888B0; --sb-faint: #5B5B84; --sb-faint-2: #63638E; --sb-faint-3: #6B6B98; --sb-primary: #7D56F4; --sb-primary-hover: #9B7CFF; --sb-primary-disabled: #3F3766; --sb-on-primary: #FFFFFF; --sb-accent: #FF5FA2; --sb-accent-bright: #FF8AC0; --sb-accent-logo: #FF5FA2; --sb-accent-chart: #55558F; --sb-ring: #4EE6FF; --sb-cyan: #4EE6FF; --sb-mint: #00F0A8; --sb-gold: #FFC64B; --sb-coral: #FF6E5E; --sb-lilac: #C8A2FF; --sb-trust-signed: #5CE8B5; --sb-trust-signed-bg: #0D2B21; --sb-trust-signed-dot: #00F0A8; --sb-trust-token: #FFC64B; --sb-trust-token-bg: #2E2410; --sb-trust-token-dot: #FFC64B; --sb-trust-open: #FF8A7A; --sb-trust-open-bg: #331812; --sb-trust-open-dot: #FF6E5E; --sb-trust-queue: #6FD8F2; --sb-trust-queue-bg: #102933; --sb-trust-queue-dot: #4EE6FF; --sb-status-pending: #6FD8F2; --sb-status-pending-bg: #102933; --sb-status-claimed: #FFC64B; --sb-status-claimed-bg: #2E2410; --sb-status-done: #5CE8B5; --sb-status-done-bg: #0D2B21; --sb-status-failed: #FF8A7A; --sb-status-failed-bg: #331812; --sb-status-neutral: #8888B0; --sb-chip-verb: #5CE8B5; --sb-chip-verb-bg: #10251D; --sb-chip-verb-border: #1F5C46; --sb-chip-queue: #6FD8F2; --sb-chip-queue-bg: #0F2630; --sb-chip-queue-border: #1D5A6E; --sb-dedup: #C8A2FF; --sb-dedup-bg: #221A3E; --sb-live: #00F0A8; --sb-live-bg: #0D2B21; --sb-toast-bg: #F4F4FF; --sb-toast-text: #08080F; --sb-scrim: rgba(8, 8, 15, 0.72); --sb-nav-active-bg: #1E1E38; --sb-row-hover: #1A1A32; --sb-row-flash: #232342; --sb-alert-tint: #2A1512; --sb-lease-track: #262645; --sb-shadow-modal: 0 24px 60px -12px rgba(0, 0, 0, 0.8); --sb-shadow-drawer: -16px 0 40px -18px rgba(0, 0, 0, 0.7); --sb-shadow-toast: 0 12px 30px -10px rgba(0, 0, 0, 0.8); --sb-glow-primary: 0 0 12px rgba(125, 86, 244, 0.55); --sb-glow-accent: 0 0 12px rgba(255, 95, 162, 0.55); --sb-glow-cyan: 0 0 12px rgba(78, 230, 255, 0.55); --sb-glow-mint: 0 0 12px rgba(0, 240, 168, 0.5); --sb-glow-soft: 0 0 24px rgba(125, 86, 244, 0.25); --sb-focus-ring: 0 0 0 3px rgba(78, 230, 255, 0.25); } } [data-theme="night"] { --sb-canvas: #08080F; --sb-panel: #15152A; --sb-raised-hi: #1E1E38; --sb-raised-lo: #10101F; --sb-header-strip: #0E0E1A; --sb-input-bg: #0A0A14; --sb-code-bg: #0E0E1A; --sb-border: #3A3A66; --sb-border-strong: #55558F; --sb-divider: #262645; --sb-input-border: #55558F; --sb-input-border-soft: #3A3A66; --sb-grid: rgba(78, 230, 255, 0.06); --sb-ink: #F4F4FF; --sb-text: #E4E4F5; --sb-body: #C9C9E8; --sb-secondary: #A9A9CE; --sb-muted: #8888B0; --sb-faint: #5B5B84; --sb-faint-2: #63638E; --sb-faint-3: #6B6B98; --sb-primary: #7D56F4; --sb-primary-hover: #9B7CFF; --sb-primary-disabled: #3F3766; --sb-on-primary: #FFFFFF; --sb-accent: #FF5FA2; --sb-accent-bright: #FF8AC0; --sb-accent-logo: #FF5FA2; --sb-accent-chart: #55558F; --sb-ring: #4EE6FF; --sb-cyan: #4EE6FF; --sb-mint: #00F0A8; --sb-gold: #FFC64B; --sb-coral: #FF6E5E; --sb-lilac: #C8A2FF; --sb-trust-signed: #5CE8B5; --sb-trust-signed-bg: #0D2B21; --sb-trust-signed-dot: #00F0A8; --sb-trust-token: #FFC64B; --sb-trust-token-bg: #2E2410; --sb-trust-token-dot: #FFC64B; --sb-trust-open: #FF8A7A; --sb-trust-open-bg: #331812; --sb-trust-open-dot: #FF6E5E; --sb-trust-queue: #6FD8F2; --sb-trust-queue-bg: #102933; --sb-trust-queue-dot: #4EE6FF; --sb-status-pending: #6FD8F2; --sb-status-pending-bg: #102933; --sb-status-claimed: #FFC64B; --sb-status-claimed-bg: #2E2410; --sb-status-done: #5CE8B5; --sb-status-done-bg: #0D2B21; --sb-status-failed: #FF8A7A; --sb-status-failed-bg: #331812; --sb-status-neutral: #8888B0; --sb-chip-verb: #5CE8B5; --sb-chip-verb-bg: #10251D; --sb-chip-verb-border: #1F5C46; --sb-chip-queue: #6FD8F2; --sb-chip-queue-bg: #0F2630; --sb-chip-queue-border: #1D5A6E; --sb-dedup: #C8A2FF; --sb-dedup-bg: #221A3E; --sb-live: #00F0A8; --sb-live-bg: #0D2B21; --sb-toast-bg: #F4F4FF; --sb-toast-text: #08080F; --sb-scrim: rgba(8, 8, 15, 0.72); --sb-nav-active-bg: #1E1E38; --sb-row-hover: #1A1A32; --sb-row-flash: #232342; --sb-alert-tint: #2A1512; --sb-lease-track: #262645; --sb-shadow-modal: 0 24px 60px -12px rgba(0, 0, 0, 0.8); --sb-shadow-drawer: -16px 0 40px -18px rgba(0, 0, 0, 0.7); --sb-shadow-toast: 0 12px 30px -10px rgba(0, 0, 0, 0.8); --sb-glow-primary: 0 0 12px rgba(125, 86, 244, 0.55); --sb-glow-accent: 0 0 12px rgba(255, 95, 162, 0.55); --sb-glow-cyan: 0 0 12px rgba(78, 230, 255, 0.55); --sb-glow-mint: 0 0 12px rgba(0, 240, 168, 0.5); --sb-glow-soft: 0 0 24px rgba(125, 86, 244, 0.25); --sb-focus-ring: 0 0 0 3px rgba(78, 230, 255, 0.25); }