/* ==========================================================================
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 — the site is DARK for everyone, because the tools our
users live in (Unity, Unreal, Blender) are. No prefers-color-scheme flip:
- bare :root -> the DARK palette, always
- :root[data-theme="light"] -> light, only via an explicit opt-in
========================================================================== */
/* ---- Dark (default) ------------------------------------------------------ */
:root {
/* color */
--y-bg: #14161B; /* deep ink ground — a surface, not pure black */
--y-surface: #1C1F26; /* cards, panels */
--y-ink: #F7F8FA; /* primary text, hairlines at full strength */
--y-muted: #9AA3B2; /* secondary text, captions */
--y-accent: #38BDF8; /* sky blue for dark grounds — sparingly */
--y-accent-2: #FACC15; /* yellow: buttons and calls to action */
--y-accent-2-ink: #14161B;
--y-accent-ink: #14161B; /* text on accent fills */
--y-line: #2A2F38; /* hairline rules, borders, faint viewport grid */
--y-ok: #3DBF7F; /* semantic: status/success only */
--y-err: #FF6B61; /* 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: dark;
}
/* The site is DARK, full stop — no prefers-color-scheme flip. A visitor on a
light-mode device still gets the dark site, the same way Unity, Unreal and
Blender do. The light palette survives ONLY behind an explicit
data-theme="light" (below) for any surface that one day grows a toggle. */
/* Pin native form controls / scrollbars to the explicitly chosen theme */
:root[data-theme="dark"] {
color-scheme: dark;
}
/* ---- Light via explicit toggle (overrides system either way) ------------- */
:root[data-theme="light"] {
color-scheme: light;
--y-bg: #F7F8FA;
--y-surface: #FFFFFF;
--y-ink: #14161B;
--y-muted: #5B6472;
--y-accent: #0284C7;
--y-accent-2: #FACC15;
--y-accent-2-ink: #14161B;
--y-accent-ink: #FFFFFF;
--y-line: #DFE3E9;
--y-ok: #1F7A4D;
--y-err: #B3261E;
}
/* ---- 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;
}