/* ============================================================ AquaMania · design-tokens.css v1.0 · 2026-05-23 Single source of truth for design tokens shared by: · catalog.css (existing --bg/--ink/--accent остаются aliases) · project-builder.css · print.css · все 7 HTML страниц Загружается ПЕРЕД catalog.css. Существующие переменные не переопределяются, только дополняются. Token families: · SPACING — 4/8 grid scale · TYPE — модульная шкала 1.25 (minor third), clamp() responsive · RADIUS — 5 ролей (control / card-sm / card-md / card-lg / pill) · SHADOW — 4 ступени elevation + cinema · SURFACE — семантические алиасы поверх --bg/--bg-card/--bg-soft · ACCENT — НЕ серии (5 series-* НЕ трогаем — RAL Classic, бренд) · MOTION — ease + duration · FOCUS — единое кольцо для focus-visible ВНИМАНИЕ: 5 брендовых series-цветов мебели определены в catalog.css (--series-aquamarine / arctic / tropic / sunset / depth + depth-bronze + arctic-line) — выверены под RAL Classic, не трогаем. ============================================================ */ :root { /* ────────────────────────────────────────────────────────── SPACING · 4/8 grid scale ────────────────────────────────────────────────────────── */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* >128px — ad-hoc, очень редко (hero stage, full-page-frame) */ /* ────────────────────────────────────────────────────────── TYPE · модульная шкала 1.25 · clamp() для responsive ────────────────────────────────────────────────────────── */ --text-xs: clamp(11px, 0.7vw, 12px); /* eyebrow / mono labels */ --text-sm: clamp(13px, 0.85vw, 14px); /* body small, captions */ --text-base: clamp(14px, 0.95vw, 16px); /* body */ --text-lg: clamp(16px, 1.1vw, 19px); /* body large, lede */ --text-xl: clamp(19px, 1.4vw, 22px); /* h3 cards */ --text-2xl: clamp(22px, 1.8vw, 28px); /* h3 cards large */ --text-3xl: clamp(28px, 2.5vw, 36px); /* h2 section */ --text-4xl: clamp(36px, 4vw, 56px); /* h2 large */ --text-5xl: clamp(48px, 6vw, 72px); /* h1 page intro */ --text-display: clamp(56px, 9vw, 132px); /* hero title */ /* Line-heights (semantic) */ --lh-tight: 1.05; /* display / h1 / h2 */ --lh-snug: 1.2; /* h3 / h4 */ --lh-base: 1.5; /* body */ --lh-loose: 1.65; /* long-form serif paragraphs */ /* Letter-spacing roles */ --tracking-display: -2px; /* hero */ --tracking-h: -1px; /* h2 */ --tracking-h-tight: -0.4px; /* h3 */ --tracking-mono: 1.4px; /* eyebrow / label */ --tracking-mono-x: 1.6px; /* small caps display */ /* ────────────────────────────────────────────────────────── RADIUS · 5 ролей (видимое разнообразие, не stand-up calmness) ────────────────────────────────────────────────────────── */ --radius-control: 8px; /* inputs, search, кнопки (calc-btn / pb-btn) */ --radius-card-sm: 12px; /* badges, micro-cards, palette-pill, tag */ --radius-card-md: 16px; /* main cards: why / toc / mat / disc / case */ --radius-card-lg: 20px; /* hero cards, modals, tender-action */ --radius-pill: 999px; /* chips, nav-cta, FAB, full-pill */ /* ────────────────────────────────────────────────────────── SHADOW · 4 elevation steps + cinema ────────────────────────────────────────────────────────── */ --shadow-sm: 0 1px 2px rgba(10, 10, 10, 0.04); --shadow-md: 0 4px 12px rgba(10, 10, 10, 0.06); --shadow-lg: 0 8px 24px rgba(10, 10, 10, 0.08); --shadow-xl: 0 16px 40px rgba(10, 10, 10, 0.12); --shadow-cinema: 0 24px 60px rgba(0, 0, 0, 0.45); /* ────────────────────────────────────────────────────────── SURFACE · семантические алиасы (поверх существующих, не заменять) ────────────────────────────────────────────────────────── */ --surface-base: var(--bg, #FAFAFA); /* основной фон body */ --surface-lifted: var(--bg-card, #FFFFFF); /* поднятые карточки */ --surface-soft: var(--bg-soft, #F4F4F4); /* альтернативные секции, th в таблицах */ --surface-cinema: #181818; /* Ferrari cinema (hero, AKVA-1 launch) */ --surface-cinema-2: #303030; /* cinema-elevated */ /* ────────────────────────────────────────────────────────── ACCENT · семантические (НЕ серии мебели, см. catalog.css :root) ────────────────────────────────────────────────────────── */ --accent-on-dark: #FFFFFF; /* explicit · ранее работал случайно через fallback */ --rating-gold: #FFB400; /* mkt-rating, отделён от --series-sunset */ --rosso-corsa: #DA291C; /* Ferrari hairline, штамп ПП 719 */ --ok: #1A7A2E; /* warranty покрывает / success / 0 РНП */ --danger: #DC143C; /* warranty НЕ покрывает / stop-list */ /* ────────────────────────────────────────────────────────── MOTION ────────────────────────────────────────────────────────── */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; /* ────────────────────────────────────────────────────────── FOCUS · единое кольцо для focus-visible ────────────────────────────────────────────────────────── */ --focus-ring: 0 0 0 2px var(--surface-base), 0 0 0 4px var(--accent, #4FA8C8); /* ────────────────────────────────────────────────────────── v1.1 PATCH · 2026-05-23 (case-card iteration) 5 переменных для cinema-surfaces и scrim-overlays. Применяются в .discipline-card--cinema, .case-card--cinema, .aqua1-launch, future full-bleed hero sections. ────────────────────────────────────────────────────────── */ --hairline-dark: #2a2a2a; /* основной hairline на cinema-фоне */ --hairline-dark-soft: rgba(255, 255, 255, 0.10); /* soft separator (dashed, табличные) */ --hairline-dark-x: rgba(255, 255, 255, 0.20); /* усиленный для chips, border-1.5px */ --scrim-cinema: rgba(20, 20, 19, 0.62); /* поверх full-bleed фото для cinema-варианта */ --scrim-editorial: rgba(243, 240, 238, 0.82); /* поверх side-photo для editorial */ } /* ────────────────────────────────────────────────────────── FOCUS RING utility — применить на все интерактивные элементы через @layer / каскад на итерации polish ────────────────────────────────────────────────────────── */ :focus-visible { outline: none; box-shadow: var(--focus-ring); }