/* ========================================================================== tokens.css — design-system tokens (Claude Design: "нержавеющая сталь + воздух") -------------------------------------------------------------------------- Theme model: light / dark via the `data-theme` attribute on (set by /js/theme.js, persisted in localStorage['ts-theme'], default light). :root holds the LIGHT palette + all shape / motion / type tokens. :root[data-theme="dark"] overrides only the values that change for dark. This is the ONLY file in the project that contains raw color literals. LEGACY ALIASES: the catalog / content / news / contacts templates and the CSS that styles them were authored against an older token vocabulary (--ink, --ink2, --muted, --panel, --anchor, --on-anchor, --accent-hi, --on-accent, --radius, --font-body, --danger, --success). Those names are re-declared at the bottom of each theme block as aliases onto the new tokens, so every existing page stays coherent in the new theme without touching its markup. New work uses the prototype vocabulary (--text, --text-2, --surface-2, --accent-hot, --r-md, …). ========================================================================== */ :root { /* === LIGHT — основная тема: нержавеющая сталь + воздух ================== */ --bg: #EEF0F0; --bg-2: #E4E7E7; --surface: #FFFFFF; --surface-2: #F4F6F6; --surface-3: #EAEDED; --line: rgba(20, 25, 29, .12); --line-2: rgba(20, 25, 29, .20); --text: #14181B; --text-2: #525A60; --text-3: #868E94; --accent: #D11F1F; --accent-hot: #E5302A; --accent-deep: #A2161A; --accent-ink: #FFFFFF; --glow: rgba(209, 31, 31, .14); --glow-soft: rgba(209, 31, 31, .06); /* product-showcase placeholder layers (hatch card, floating-spec stage) */ --ph-base: linear-gradient(180deg, #E7EAEB 0%, #D4D9DB 100%); --ph-stripe: rgba(20, 25, 29, .045); --ph-box: linear-gradient(176deg, #CFD4D7 0%, #A7AEB3 100%); --ph-line: rgba(20, 25, 29, .16); --ph-contact: rgba(20, 25, 29, .16); /* shape */ --r-xs: 3px; --r-sm: 5px; --r-md: 9px; --r-lg: 16px; --r-xl: 26px; /* depth + motion */ --shadow: 0 30px 70px -34px rgba(20, 35, 45, .28); --shadow-sm: 0 14px 30px -18px rgba(20, 35, 45, .16); --ease: cubic-bezier(.2, .75, .2, 1); /* layout */ --maxw: 1320px; color-scheme: light; /* typography */ --font-display: 'Unbounded', system-ui, sans-serif; --font-body: 'Onest', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace; /* feedback */ --danger: #C0392B; --success: #2F855A; /* ---- LEGACY ALIASES (catalog / content / news / contacts) ------------- */ --ink: var(--text); --ink2: var(--text-2); --muted: var(--text-3); --line2: var(--line-2); --panel: var(--surface-2); --anchor: #14181B; /* dark steel chrome (footer/anchor blocks) */ --on-anchor: #E8EBEC; --accent-hi: var(--accent-hot); --on-accent: var(--accent-ink); --radius: var(--r-md); } :root[data-theme="dark"] { /* === DARK ============================================================== */ --bg: #15171A; --bg-2: #1A1D21; --surface: #1F2328; --surface-2: #262B31; --surface-3: #2E343B; --line: rgba(236, 240, 243, .10); --line-2: rgba(236, 240, 243, .18); --text: #EEF1F3; --text-2: #A6AEB5; --text-3: #717981; --accent: #E63329; --accent-hot: #F5483B; --accent-deep: #B71E1E; --accent-ink: #FFFFFF; --glow: rgba(230, 51, 41, .40); --glow-soft: rgba(230, 51, 41, .15); --ph-base: linear-gradient(180deg, #2A3036 0%, #20252A 100%); --ph-stripe: rgba(236, 240, 243, .04); --ph-box: linear-gradient(176deg, #3A4148 0%, #23282D 100%); --ph-line: rgba(236, 240, 243, .16); --ph-contact: rgba(0, 0, 0, .5); --shadow: 0 30px 80px -30px rgba(0, 0, 0, .72); --shadow-sm: 0 12px 30px -16px rgba(0, 0, 0, .55); color-scheme: dark; /* ---- LEGACY ALIASES (dark) -------------------------------------------- */ --anchor: #0E1013; --on-anchor: #EEF1F3; }