/* ==========================================================================
Yuliia.ai — design tokens
Source of truth: brand/BRAND.md
Fonts are loaded by the HTML pages themselves (do NOT @import here in
production — keep font loading in for performance). Reference link:
Theme contract (three states):
- bare :root -> complete LIGHT palette (default / system-light)
- @media dark, guarded :root:not([data-theme="light"]) -> dark via system
- :root[data-theme="dark"] -> dark via explicit toggle (wins both directions)
========================================================================== */
/* ---- Light (default) ---------------------------------------------------- */
:root {
/* color */
--y-bg: #F7F8FA; /* porcelain cool paper — page ground */
--y-surface: #FFFFFF; /* cards, panels */
--y-ink: #14161B; /* primary text, hairlines at full strength */
--y-muted: #5B6472; /* cool slate — secondary text, captions */
--y-accent: #E8590C; /* viewport orange — the single accent, sparingly */
--y-accent-ink: #FFFFFF; /* text on accent fills */
--y-line: #DFE3E9; /* hairline rules, borders, faint viewport grid */
--y-ok: #1F7A4D; /* semantic: status/success only */
--y-err: #B3261E; /* semantic: status/error only */
/* type */
--y-font-display: "Bricolage Grotesque", "Arial Black", "Helvetica Neue", Arial, sans-serif;
--y-font-body: "Instrument Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
--y-font-mono: "IBM Plex Mono", "Cascadia Mono", Consolas, "Courier New", monospace;
color-scheme: light dark;
}
/* ---- Dark via system preference (no explicit choice) -------------------- */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--y-bg: #14161B; /* deep ink ground */
--y-surface: #1C1F26; /* raised surfaces */
--y-ink: #F7F8FA;
--y-muted: #9AA3B2;
--y-accent: #FF7A33; /* brighter orange for dark grounds */
--y-accent-ink: #14161B;
--y-line: #2A2F38;
--y-ok: #3DBF7F;
--y-err: #FF6B61;
}
}
/* Pin native form controls / scrollbars to the explicitly chosen theme */
:root[data-theme="light"] {
color-scheme: light;
}
/* ---- Dark via explicit toggle (overrides system either way) -------------- */
:root[data-theme="dark"] {
color-scheme: dark;
--y-bg: #14161B;
--y-surface: #1C1F26;
--y-ink: #F7F8FA;
--y-muted: #9AA3B2;
--y-accent: #FF7A33;
--y-accent-ink: #14161B;
--y-line: #2A2F38;
--y-ok: #3DBF7F;
--y-err: #FF6B61;
}
/* ---- Base application ---------------------------------------------------- */
body {
background: var(--y-bg);
color: var(--y-ink);
font-family: var(--y-font-body);
}
/* Digits align wherever they carry evidence: pricing, costs, credits, stats */
.tnum,
table,
[data-tnum] {
font-variant-numeric: tabular-nums;
}