/* HYPERFIC — design tokens
Извлечено 1:1 из текущего дизайна (desktop 1440×900 / mobile 390×844).
Значения менять нельзя — это точная фиксация текущего визуала. */
:root {
/* ---------- COLOR: surfaces ---------- */
--hf-coal: #0C0C0E; /* фон экрана продукта */
--hf-coal-canvas: #08080A; /* фон канваса/страницы вокруг артборда */
--hf-coal-top: #0E0E10; /* верх фонового градиента */
--hf-coal-mid: #0B0B0D; /* середина (62%) */
--hf-coal-bottom: #0D0D0F; /* низ */
--hf-graphite-panel: #121316; /* drawer / bottom sheet / sticky-футер */
--hf-graphite-menu: #16171B; /* поповер выбора источника */
--hf-graphite-hover: #1E2024; /* hover пункта в поповере */
--hf-graphite-chip: #22242A; /* selected chip */
--hf-device-shell: #101012; /* корпус мобильного мокапа (только канвас) */
/* Фон экрана: очень слабая тональная вариация, без спота */
--hf-bg-gradient: linear-gradient(178deg, #0E0E10 0%, #0B0B0D 62%, #0D0D0F 100%);
/* Плёнка grain, opacity носителя 0.55 (desktop) / 0.5 (mobile) */
--hf-grain-desktop: url("data:image/svg+xml;utf8,");
--hf-grain-mobile: url("data:image/svg+xml;utf8,");
/* ---------- COLOR: ink (warm ivory) ---------- */
--hf-ivory: #F1E7D8; /* базовый текст */
--hf-ivory-strong: #F3EADC; /* заголовки, текст на кнопках, selected chip */
--hf-ivory-88: rgba(241,231,216,0.88);
--hf-ivory-76: rgba(241,231,216,0.76);
--hf-ivory-66: rgba(241,231,216,0.66);
--hf-ivory-64: rgba(241,231,216,0.64);
--hf-ivory-62: rgba(241,231,216,0.62);
--hf-ivory-56: rgba(241,231,216,0.56);
--hf-ivory-55: rgba(241,231,216,0.55);
--hf-ivory-50: rgba(241,231,216,0.50);
--hf-ivory-48: rgba(241,231,216,0.48);
--hf-ivory-46: rgba(241,231,216,0.46);
--hf-ivory-45: rgba(241,231,216,0.45);
--hf-ivory-44: rgba(241,231,216,0.44);
--hf-ivory-40: rgba(241,231,216,0.40);
--hf-ivory-70: rgba(241,231,216,0.70); /* soft ivory — description / readable narrative copy */
--hf-ivory-36: rgba(241,231,216,0.36);
--hf-ivory-34: rgba(241,231,216,0.34);
--hf-ivory-28: rgba(241,231,216,0.28);
/* ---------- COLOR: steel / metal ----------
Deliberately cool — a genuine hue/temperature shift away from ivory's
warmth (not just a dimmer opacity of the same warm color), so cold
functional UI (metadata, inactive/tertiary elements, decorative
stitches) reads as a clearly different material next to warm editorial
content (headings, primary CTA, selected values). Neutral/cool gray,
not blue or cyan. */
--hf-steel: #A3ABB3; /* иконки-стрелки, метки, стежковые × */
--hf-steel-stitch: #9DA5AD; /* фоновые × и стежковая линия */
--hf-steel-bright: #DCE2E8; /* × внутри вордмарка HYPERFIC */
--hf-steel-85: rgba(163,171,179,0.85);
--hf-steel-78: rgba(163,171,179,0.78);
--hf-steel-70: rgba(163,171,179,0.70);
--hf-steel-62: rgba(163,171,179,0.62);
--hf-steel-45: rgba(163,171,179,0.45);
/* Металлический thumb слайдера — статичный, без анимаций */
--hf-metal-thumb: linear-gradient(140deg, #DFE3E8, #8A9098 55%, #BFC5CC);
/* ---------- COLOR: accent (очень редко) ----------
Dusty/bottle sage green — a hidden "magical" layer, not a normal UI
accent. Only easter eggs (micro/combo/secret) and rare interaction
reveals (DRAMIONE hover, one home stitch-star) ever use this. Never
primary CTA, selected chips, slider, borders, or headings. */
--hf-magic-green: #6E7C6E;
/* ---------- BORDERS ---------- */
--hf-border-hairline: 1px solid rgba(241,231,216,0.09); /* разделители, борта секций */
--hf-border-soft: 1px solid rgba(241,231,216,0.10); /* chip default */
--hf-border-line: 1px solid rgba(241,231,216,0.12); /* линия слайдера, тэг, поповер */
--hf-border-underline:1px solid rgba(241,231,216,0.16); /* «Мне повезёт» */
--hf-border-chip-hover:1px solid rgba(241,231,216,0.24);
--hf-border-artboard: 1px solid rgba(241,231,216,0.07);
--hf-border-btn: 1px solid rgba(201,204,209,0.20); /* primary CTA */
--hf-border-btn-cta: 1px solid rgba(201,204,209,0.22); /* sticky CTA в шторке */
--hf-border-chip-on: 1px solid rgba(201,204,209,0.42); /* selected chip */
--hf-border-panel: 1px solid rgba(201,204,209,0.16); /* drawer / sheet */
/* ---------- RADIUS ---------- */
--hf-radius-pill: 999px; /* все кнопки, чипы, тэги */
--hf-radius-menu: 11px; /* поповер источников */
--hf-radius-sheet: 20px; /* bottom sheet, верхние углы */
--hf-radius-thumb: 2px; /* thumb слайдера, ручка шторки */
/* ---------- SHADOWS ---------- */
--hf-shadow-cta-desktop: 0 1px 0 rgba(241,231,216,0.05) inset, 0 20px 44px rgba(0,0,0,0.42);
--hf-shadow-cta-mobile: 0 1px 0 rgba(241,231,216,0.05) inset, 0 16px 34px rgba(0,0,0,0.40);
--hf-shadow-drawer: -50px 0 100px rgba(0,0,0,0.5);
--hf-shadow-sheet: 0 -24px 70px rgba(0,0,0,0.55);
--hf-shadow-menu: 0 18px 40px rgba(0,0,0,0.55);
--hf-shadow-thumb-ring: 0 0 0 3px #121316; /* «прокол» фона панели вокруг thumb */
/* ---------- SURFACES: gradients ---------- */
--hf-btn-surface: linear-gradient(180deg, #25272B, #16171A); /* gunmetal, статичный */
--hf-chip-surface-off: rgba(241,231,216,0.03);
/* ---------- SCRIMS ---------- */
--hf-scrim-drawer: rgba(8,8,10,0.42);
--hf-scrim-sheet: rgba(8,8,10,0.60);
/* ---------- TYPOGRAPHY ---------- */
--hf-font-display: 'Unbounded', system-ui, sans-serif; /* голос HYPERFIC: вордмарк, h1, h3 */
--hf-font-ui: 'Golos Text', system-ui, sans-serif; /* весь UI + название фанфика */
--hf-font-stitch: monospace; /* символ × в иконках и фоне */
/* ---------- MOTION ---------- */
--hf-ease-out: cubic-bezier(.2,.7,.2,1);
--hf-ease-sheet: cubic-bezier(.2,.8,.2,1);
/* Никаких зацикленных анимаций и shimmer: металл статичен. */
/* ============================================================
SEMANTIC ROLES — the one material system filters + result should draw
from. One coherent read: warm ivory IS content (what the user reads),
cold steel IS interface (what describes/supports it). Not a full token
refactor — every value below still just points at an --hf-* token
above; this is the naming layer new/updated styles should reach for
instead of picking an --hf-ivory-XX or --hf-steel-XX opacity by eye.
============================================================ */
--text-primary: var(--hf-ivory-strong); /* strong ivory — H1, questions, selected values, CTA */
--text-body: var(--hf-ivory-70); /* soft ivory — description, readable narrative copy */
--text-meta: var(--hf-steel-78); /* cold steel — metadata content: original title, author, tags */
--text-muted: var(--hf-steel-45); /* muted cold steel — inactive labels, supporting/utility copy */
--text-secondary: var(--hf-ivory); /* legacy alias, still used outside this cleanup's scope */
--text-ghost: var(--hf-ivory-28); /* legacy alias, still used outside this cleanup's scope */
--surface-page: var(--hf-coal); /* screen background */
--surface-panel: var(--hf-graphite-panel); /* drawer / sheet / sticky footer */
--surface-elevated: var(--hf-graphite-menu); /* popovers, above the panel */
--stitch-default: var(--hf-steel-stitch); /* × marks, thread line, decorative stitches */
--stitch-bright: var(--hf-steel-bright); /* wordmark "I", brighter accents */
--accent-magic: var(--hf-magic-green); /* hidden layer — easter eggs only, see above */
--border-default: var(--hf-border-soft); /* chip / hairline default */
--border-strong: var(--hf-border-chip-on); /* selected chip, emphasis */
--border-neutral: 1px solid rgba(163,171,179,0.30); /* steel-based — tags and other neutral borders, never ivory */
}