/* ============================================================
THE BOT PLATFORM — DESIGN TOKENS v1 (DASHBOARD-FOUNDATION-P2)
------------------------------------------------------------
Canonical source of truth for every same-stack (vanilla JS/HTML)
dashboard's color/typography/spacing/radius/motion tokens --
extracted VERBATIM (byte-identical values, zero visual change) from
operator-dashboard/dashboard.css, which was the de facto source both
THE BOT and Commerce Dashboard already depended on before this phase
(see docs/architecture/DASHBOARD-ARCHITECTURE-P1.md §T -- Fable's own
correction: a shared token file must be its own file, never a product
stylesheet a second dashboard merely happens to ).
Restaurant ROS does NOT consume this file (different repository,
different tech stack -- React/TypeScript, its own styles.css with a
differently-named token vocabulary and no dark theme). ROS alignment
is a documented VALUE mapping, not a shared file -- see
docs/architecture/ROS-TOKEN-MAPPING.md.
DARK is the base theme, LIGHT a full second theme (not an inversion) --
system preference and an explicit [data-theme] both override only the
dictionary below; no rule anywhere in a consumer stylesheet should
need to know a literal color value.
============================================================ */
:root {
/* Surfaces */
--bg: #0A0F1A;
--surface: #111A2B;
--surface-alt: #172236;
--surface-raised: #1B2740;
/* Borders. Semi-transparent so they sit correctly on any surface. */
--border: rgba(148, 176, 224, 0.16);
--border-strong: rgba(148, 176, 224, 0.30);
/* Text */
--ink: #E8EFFA;
--ink-muted: #9FB0C9;
--ink-faint: #6B7E9B;
--on-accent: #FFFFFF;
/* Brand blue -- a signal, not a constant glow. */
--accent: #3D8BFF;
--accent-soft: #6FA8FF;
--accent-wash: rgba(61, 139, 255, 0.14);
/* Semantic status vocabulary (DASHBOARD-ARCHITECTURE-P1 §M / this
phase's §8): success/warning/danger/info are deliberately separate
from --accent -- "succeeded" must never look the same as
"selected". Domain code maps its OWN states onto these -- see each
dashboard's own docs for its own status->semantic mapping; no
domain vocabulary (Yandex/FBY/order-delivered/waiter-status/...)
belongs in this file. */
--success: #3DD68C;
--success-ink: #8FE8BE;
--success-wash: rgba(61, 214, 140, 0.14);
--warning: #E8B84B;
--warning-ink: #F3D08A;
--warning-wash: rgba(232, 184, 75, 0.14);
--warning-edge: rgba(232, 184, 75, 0.42);
--danger: #FF6B6B;
--danger-ink: #FFA8A8;
--danger-wash: rgba(255, 107, 107, 0.13);
--danger-edge: rgba(255, 107, 107, 0.42);
--info-ink: #B9A8FF;
--info-wash: rgba(150, 120, 255, 0.14);
--shadow-color: rgba(0, 0, 0, 0.55);
/* One radius scale instead of arbitrary per-file values. */
--radius-sm: 6px;
--radius: 10px;
--radius-lg: 14px;
--radius-pill: 999px;
--dur-fast: 0.12s;
--dur: 0.2s;
--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
--font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
color-scheme: dark;
}
/* Light theme. Values were already close to the prior look, so nothing
inverts for anyone already working in light -- only the accent is
tightened to the brand blue and neutrals get a faint blue undertone
instead of pure gray. */
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) { --theme-light: 1; }
}
:root[data-theme="light"] { --theme-light: 1; }
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) {
--bg: #F4F7FC;
--surface: #FFFFFF;
--surface-alt: #F1F5F9;
--surface-raised: #FFFFFF;
--border: #E2E8F0;
--border-strong: #CBD5E1;
--ink: #16233A;
--ink-muted: #5C7088;
--ink-faint: #94A3B8;
--accent: #2F7BFF;
--accent-soft: #1D5FE0;
--accent-wash: #EAF2FF;
--success: #16A34A;
--success-ink: #166534;
--success-wash: #DCFCE7;
--warning: #B45309;
--warning-ink: #92400E;
--warning-wash: #FEF3C7;
--warning-edge: #FCD34D;
--danger: #DC2626;
--danger-ink: #991B1B;
--danger-wash: #FEF2F2;
--danger-edge: #FECACA;
--info-ink: #5B21B6;
--info-wash: #EDE9FE;
--shadow-color: rgba(20, 40, 80, 0.10);
color-scheme: light;
}
}
:root[data-theme="light"] {
--bg: #F4F7FC;
--surface: #FFFFFF;
--surface-alt: #F1F5F9;
--surface-raised: #FFFFFF;
--border: #E2E8F0;
--border-strong: #CBD5E1;
--ink: #16233A;
--ink-muted: #5C7088;
--ink-faint: #94A3B8;
--accent: #2F7BFF;
--accent-soft: #1D5FE0;
--accent-wash: #EAF2FF;
--success: #16A34A;
--success-ink: #166534;
--success-wash: #DCFCE7;
--warning: #B45309;
--warning-ink: #92400E;
--warning-wash: #FEF3C7;
--warning-edge: #FCD34D;
--danger: #DC2626;
--danger-ink: #991B1B;
--danger-wash: #FEF2F2;
--danger-edge: #FECACA;
--info-ink: #5B21B6;
--info-wash: #EDE9FE;
--shadow-color: rgba(20, 40, 80, 0.10);
color-scheme: light;
}
/* While the inline script hasn't yet set the theme attribute,
transitions are suppressed -- otherwise the first frame visibly
"travels" from one theme to the other. */
.theme-booting * { transition: none !important; }
/* C2.5D-DASHBOARD-FOUNDATION-P2: base typography. Every consumer of
this file gets the platform's own base font applied -- THE BOT's own
product stylesheet already declared exactly this value directly on
`body` (operator-dashboard/dashboard.css), so this line changes
NOTHING for THE BOT (still the literal `sans-serif` generic family,
not the more specific --font-ui stack, deliberately, to guarantee
byte-identical rendering rather than introduce even a subtle font
change here). Commerce Dashboard previously inherited this only
because it happened to THE BOT's own file -- now that it
s only the shared foundation, this line is what makes that
inheritance an explicit, owned platform default instead of an
accidental one. */
body { font-family: sans-serif; }