/* HYPERFIC — design tokens
Извлечено 1:1 из текущего дизайна (desktop 1440×900 / mobile 390×844).
Значения менять нельзя — это точная фиксация текущего визуала. */
:root {
/* Tells the browser's own chrome (not just page content) that this page
is dark — without it, Safari on iPhone renders the safe-area/notch
strip and the top overscroll-bounce fill using its light-mode default
regardless of any background-color set on html/body, showing as a
persistent white bar above the dark UI. See hyperfic.css's html/body
rule below and index.html's matching tag. */
color-scheme: dark;
/* ---------- 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) ---------- */
/* The ONE source of the ivory family's color. The whole alpha ramp
(--hf-ivory-NN, declared once below in the shared `:root, [data-pairing]`
rule) is built from these channels, so a pairing theme re-points ivory by
changing this value (and the two base tokens) — never per component. */
--hf-ivory-rgb: 241, 231, 216;
--hf-ivory: #F1E7D8; /* базовый текст */
--hf-ivory-strong: #F3EADC; /* заголовки, текст на кнопках, selected chip */
/* ---------- 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;
/* TEMPORARY (local Tomione prototype): Tomione's accent — the counterpart of
the sage-green magic layer above (#5E8E8C). A muted, slightly desaturated
teal (not cyan/neon), ~5.3:1 against the near-black background. Inside
[data-pairing="tomione"] it REPLACES --hf-magic-green (see the theme block
at the end of this file), so everything that speaks in the magic/accent
voice — reaction, micro/combo quips, easter eggs, the magic star — takes it
through --accent-magic with no per-component color. One standalone token,
trivial to swap. */
--hf-tomione-accent: #5E8E8C;
/* TEMPORARY (local Tomione prototype): Tomione's ivory — a muted, clearly
cool smoky steel counterpart of the warm Dramione ivory (#D9DFE2). It REPLACES the whole
ivory family inside [data-pairing="tomione"] (see the theme block at the
end of this file), so nothing on a Tomione screen keeps the warm tint.
Channels are the single source; the color token is derived from them. */
--hf-tomione-ivory-rgb: 217, 223, 226; /* #D9DFE2 */
--hf-tomione-ivory: rgb(var(--hf-tomione-ivory-rgb));
/* ---------- 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-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 */
--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 */
--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 */
}
/* ============================================================
IVORY FAMILY + MAGIC ACCENT — the alpha ramp, the semantic roles built on
it, and --accent-magic (the hidden easter-egg/reaction layer, derived from
--hf-magic-green).
Declared once, for BOTH `:root` and every themed scope: a custom property
that references var() is resolved where it is declared, so the ramp must be
re-declared inside [data-pairing] to pick up that scope's --hf-ivory-rgb /
--hf-ivory-strong. (Computed values at :root are identical to the former
literal rgba(241,231,216, α) tokens, so the default pairing is unchanged.)
Steel tokens (--text-meta, --text-muted, --hf-steel-*) are a separate,
pairing-neutral family and are deliberately not part of this.
============================================================ */
:root,
[data-pairing] {
--hf-ivory-88: rgba(var(--hf-ivory-rgb), 0.88);
--hf-ivory-76: rgba(var(--hf-ivory-rgb), 0.76);
--hf-ivory-66: rgba(var(--hf-ivory-rgb), 0.66);
--hf-ivory-64: rgba(var(--hf-ivory-rgb), 0.64);
--hf-ivory-62: rgba(var(--hf-ivory-rgb), 0.62);
--hf-ivory-56: rgba(var(--hf-ivory-rgb), 0.56);
--hf-ivory-55: rgba(var(--hf-ivory-rgb), 0.55);
--hf-ivory-50: rgba(var(--hf-ivory-rgb), 0.50);
--hf-ivory-48: rgba(var(--hf-ivory-rgb), 0.48);
--hf-ivory-46: rgba(var(--hf-ivory-rgb), 0.46);
--hf-ivory-45: rgba(var(--hf-ivory-rgb), 0.45);
--hf-ivory-44: rgba(var(--hf-ivory-rgb), 0.44);
--hf-ivory-40: rgba(var(--hf-ivory-rgb), 0.40);
--hf-ivory-70: rgba(var(--hf-ivory-rgb), 0.70); /* soft ivory — description / readable narrative copy */
--hf-ivory-36: rgba(var(--hf-ivory-rgb), 0.36);
--hf-ivory-34: rgba(var(--hf-ivory-rgb), 0.34);
--hf-ivory-28: rgba(var(--hf-ivory-rgb), 0.28);
--accent-magic: var(--hf-magic-green); /* hidden layer — easter eggs only, see above */
--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-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 */
}
/* A themed screen sets its own base text color; the default pairing keeps
the body-level color from hyperfic.css. */
[data-pairing] { color: var(--hf-ivory); }
/* ============================================================
PAIRING THEMES — scoped by [data-pairing=""] on .hf-screen (see
pairings.js's pairingAttr). The default pairing (Dramione) has no
attribute and therefore no override: its look is the base above.
A theme re-points only source values — the ivory family's, and the magic
accent's; every component that uses ivory or the accent — directly or
through the ramp / semantic roles — follows automatically. No component is
duplicated or recolored by hand.
============================================================ */
[data-pairing="tomione"] {
--hf-ivory-rgb: var(--hf-tomione-ivory-rgb);
--hf-ivory: var(--hf-tomione-ivory);
--hf-ivory-strong: var(--hf-tomione-ivory);
--hf-magic-green: var(--hf-tomione-accent); /* the whole magic/accent layer follows through --accent-magic */
}