/* ═══════════════════════════════════════════════════════════════ tokens.css — Дизайн-токены Студии печати (3 слоя) Layer 1: primitives (raw values) Layer 2: semantic (purpose aliases) Layer 3: components (component-specific) ═══════════════════════════════════════════════════════════════ */ /* ─── FONTS ────────────────────────────────────────────────────── Self-hosted (audit 2026-05-24 BLIND-G-06/ARCH-06): убран Google Fonts CDN из enqueue.php (152-ФЗ серая зона + render-blocking). Все шрифты — local. Subsets: latin + cyrillic (минимум для русского сайта). unicode-range разделяет — браузер качает только нужный subset. ──────────────────────────────────────────────────────────────── */ /* Inter Tight — body (--font-mh-body). Variable 300-800. */ @font-face { font-family: 'Inter Tight'; src: url('../fonts/intertight-latin.woff2') format('woff2-variations'), url('../fonts/intertight-latin.woff2') format('woff2'); font-weight: 300 800; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter Tight'; src: url('../fonts/intertight-cyrillic.woff2') format('woff2-variations'), url('../fonts/intertight-cyrillic.woff2') format('woff2'); font-weight: 300 800; font-style: normal; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* JetBrains Mono — mono accent (--font-mh-mono). Variable 400-600. */ @font-face { font-family: 'JetBrains Mono'; src: url('../fonts/jetbrainsmono-latin.woff2') format('woff2-variations'), url('../fonts/jetbrainsmono-latin.woff2') format('woff2'); font-weight: 400 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono'; src: url('../fonts/jetbrainsmono-cyrillic.woff2') format('woff2-variations'), url('../fonts/jetbrainsmono-cyrillic.woff2') format('woff2'); font-weight: 400 600; font-style: normal; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* Pretendard — display (--font-mh-display). Variable, был локально. */ @font-face { font-family: 'Pretendard'; src: url('../fonts/PretendardVariable.woff2') format('woff2-variations'), url('../fonts/PretendardVariable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } /* ═══ LAYER 1: PRIMITIVES ════════════════════════════════════════ */ :root { /* COLORS — story (graphite + paper + yellow) */ --color-graphite-950: #0a0a0a; --color-graphite-900: #1a1a1a; --color-graphite-700: #242521; --color-graphite-500: #66685e; --color-graphite-450: #5a554b; /* W3: точная середина между graphite-500 и warm-700 — для .mh --fg-mute */ --rgb-graphite-950: 10, 10, 10; --rgb-graphite-900: 26, 26, 26; --rgb-graphite-700: 36, 37, 33; --rgb-graphite-500: 102, 104, 94; --rgb-graphite-450: 90, 85, 75; --color-yellow-700: #cc8e00; --color-yellow-600: #d99c00; --color-yellow-550: #e0a510; /* W3: hover-state Mohawk-стека, темнее yellow-500 на ~9% */ --color-yellow-500: #ffb913; --color-yellow-100: #fff5d6; --rgb-yellow-700: 204, 142, 0; --rgb-yellow-550: 224, 165, 16; --rgb-yellow-500: 255, 185, 19; --rgb-yellow-marker: 255, 200, 50; /* COLORS — supporting warm gray */ --color-warm-900: #2a2521; /* W3: тёмная линия Mohawk (line-strong), теплее графита */ --color-warm-800: #2a2826; --color-warm-700: #3a3835; --color-warm-600: #5a5854; --color-warm-500: #7a7773; --color-warm-450: #8a8276; /* W3: средне-тёплый серый для .mh --fg-quiet */ --color-warm-300: #c4bfb7; --color-warm-250: #d4cdbb; /* W3: тёплая линия Mohawk (line), светлее warm-300 */ --color-warm-200: #ddd8d0; --color-warm-100: #f5efe2; --rgb-warm-800: 42, 40, 38; --rgb-warm-700: 58, 56, 53; --rgb-warm-600: 90, 88, 84; --rgb-warm-500: 122, 119, 115; --rgb-warm-200: 221, 216, 208; --color-paper: #fffdf7; --color-milk: #f6f1e7; --color-soft: #ebe5d8; --rgb-paper: 255, 253, 247; --rgb-milk: 246, 241, 231; --rgb-soft: 235, 229, 216; /* COLORS — status */ --color-success: #2d6a4f; --color-error: #c1432f; --color-warning: #d6aa2f; --color-status-working: #3aa66f; --rgb-status-working: 58, 166, 111; /* COLORS — print/decor primitives */ --color-print-cyan: #00aeef; --color-print-magenta: #ec008c; --color-print-key: #231f20; --color-ink-black: #000; --color-white: #fff; --rgb-black: 0, 0, 0; --rgb-white: 255, 255, 255; --rgb-pin-highlight: 255, 220, 130; --rgb-pin-mid: 200, 145, 40; --rgb-pin-shadow: 140, 95, 25; --rgb-mount-tape: 228, 210, 145; --color-map-placeholder-top: #e8e4d9; --color-map-placeholder-bottom: #ddd6c3; /* SPACING (4px base) */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-24: 6rem; /* TYPOGRAPHY */ --font-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --font-display: "Pretendard", "Pretendard Variable", var(--font-body); --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; /* TYPOGRAPHY — Mohawk-namespace stack (W3, ADR-020). Используется внутри .mh wrapper. Mohawk-концепт построен на Inter Tight + Pretendard + JetBrains Mono — отдельный набор от admin/legacy Inter. */ --font-mh-body: "Inter Tight", -apple-system, BlinkMacSystemFont, sans-serif; --font-mh-display: "Pretendard", "Inter Tight", sans-serif; --font-mh-mono: "JetBrains Mono", ui-monospace, monospace; --fs-xs: 0.8rem; --fs-sm: 1rem; --fs-md: 1.25rem; --fs-lg: 1.563rem; --fs-xl: 1.953rem; --fs-2xl: 2.441rem; --fs-3xl: 3.815rem; --fs-hero: clamp(40px, 5vw, 64px); /* ─── EXTENDED TYPE SCALE (2026-05-22) ─────────────────────── Practical scale основанный на actual usage в Mohawk-секциях. Functional naming — `--text-eyebrow` понятно для чего, не нужно помнить что это 11px. Legacy `--fs-*` не трогаются (used в Modal/Privacy через `--text-caption/body/lead`). Mapping старых hardcoded → новых токенов (для миграции): 8 / 8.5 / 9 / 9.5 → --text-mono-3xs (9px) 10 / 10.5 → --text-mono-2xs (10px) 11 / 11.5 → --text-eyebrow (11px) ← 39 usages 12 / 12.5 → --text-mono-sm (12px) 13 / 13.5 / 14 → --text-body-sm (14px) 15 / 16 / 16.5 → --text-body (16px) 17 / 18 / 19 → --text-h3 (18px) 20 / 22 → --text-price (22px) 24 / 28 → --text-h2-sm (28px) 30 / 32 / 36 → --text-h2 (36px) 40 / 48 → --text-h1 (48px) 56+ → --text-display (hero clamp) */ --text-mono-3xs: 9px; --text-mono-2xs: 10px; --text-eyebrow: 11px; --text-mono-sm: 12px; --text-body-sm: 14px; --text-body: 16px; /* --text-h3 переопределяется ниже после legacy fs-* — здесь добавляем практический size для small headings (block-head h3, lead) */ --text-h3-sm: 18px; --text-price: 22px; --text-h2-sm: 28px; /* --text-h2 / --text-h1 уже определены в semantic layer ниже как fs-2xl/3xl */ --text-h2-md: 36px; --text-h1-md: 48px; --text-display: clamp(40px, 8vw, 64px); --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; --lh-tight: 1.05; --lh-snug: 1.15; --lh-base: 1.5; --lh-flat: 1; --ls-hero: 0; --ls-tight: -0.01em; --ls-base: 0; --ls-caps: 0.04em; /* RADIUS */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-pill: 999px; /* SHADOWS */ --shadow-sm: 0 4px 12px rgba(36, 37, 33, 0.06); --shadow-md: 0 12px 30px rgba(36, 37, 33, 0.08); --shadow-lg: 0 18px 50px rgba(36, 37, 33, 0.10); /* iOS SAFE-AREA INSETS (audit 2026-05-24 BLIND-G-06). iPhone 14/15 home-indicator (34pt) + notch (47pt). Без этих токенов sticky bottom элементы перекрыты home-indicator → CTA нерабочая. Требует в header.php — иначе env() = 0 на iOS. Fallback 0px — на non-iOS визуально нейтрально. Override для теста: :root { --safe-bottom: 34px; --safe-top: 47px; } (используется в tmp-ios-safe-area/02-after.py для simulation). */ --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-top: env(safe-area-inset-top, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); /* MOTION — единая система ритмов и кривых. Принципы: длинный tail, малые distances, без bounce. Brand-aligned (печатная студия = серьёзно). Подробно: vault/decisions/019. */ --duration-instant: 100ms; --duration-fast: 150ms; --duration-normal: 280ms; --duration-slow: 420ms; --duration-reveal: 700ms; --duration-ambient: 10s; --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* default decelerate */ --ease-out-smooth: cubic-bezier(0.16, 1, 0.3, 1); /* reveal (long-tail) */ --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-in-out-soft: cubic-bezier(0.45, 0, 0.55, 1); /* ambient drift */ /* W5 unify (audit 2026-05-24 motion): 2 дополнительных easing, ранее hardcoded. */ --ease-printer-pass: cubic-bezier(0.22, 0.61, 0.36, 1); /* «print head decel» — errors.md 11.05, sections.css printer-pass system */ --ease-css-default: cubic-bezier(0.25, 0.1, 0.25, 1); /* стандартный CSS ease (legacy _anim.css hero stagger) */ /* MOTION durations расширение для printer-pass (главная) */ --duration-printer: 900ms; /* единый tempo printer-pass паттернов (errors.md 11.05) */ /* MOTION distances — расстояние translateY для каждого pattern'а */ --motion-lift-y-sm: -1px; /* hover lift лёгкий — small links, top-nav, dense controls (calc qty) */ --motion-lift-y-md: -2px; /* hover lift средний — cards, buttons primary, gallery thumbs */ --motion-lift-y: -3px; /* hover lift стандарт — service-card, hero CTA, contacts-cta (ADR-019 default) */ --motion-lift-y-lg: -4px; /* hover lift максимум — feature cards в kimi-стандарте (.mh__service tilt) */ --motion-reveal-y: 32px; /* scroll-reveal entry — заметнее */ /* W6 cleanup: --motion-drift-y удалён — использовался только в legacy .hv-layer-* drift анимациях (sections.css), которые удалены вместе с motion.js orphan-файлом. */ /* LAYOUT — full-bleed first */ --page-padding-x: clamp(20px, 4vw, 96px); --page-padding-y: clamp(48px, 6vw, 128px); --prose-max: 720px; --grid-max: 1680px; /* BREAKPOINTS (для справки в комментариях, медиа-запросы пишем явно) */ --bp-mobile: 640px; --bp-tablet: 1024px; --bp-desktop: 1440px; } /* ═══ LAYER 2: SEMANTIC ═════════════════════════════════════════ */ :root { /* BACKGROUNDS */ --color-bg: var(--color-paper); --color-bg-subtle: var(--color-milk); --color-bg-surface: var(--color-soft); --color-bg-inverse: var(--color-warm-800); /* FOREGROUNDS */ --color-fg: var(--color-graphite-700); --color-fg-muted: var(--color-graphite-500); --color-fg-subtle: var(--color-warm-600); --color-fg-inverse: var(--color-paper); /* BRAND ACTIONS */ --color-primary: var(--color-graphite-900); --color-primary-hover: var(--color-graphite-700); --color-primary-fg: var(--color-paper); --color-accent: var(--color-yellow-500); --color-accent-hover: var(--color-yellow-600); --color-accent-fg: var(--color-graphite-900); /* BORDERS */ --color-border: var(--color-warm-200); --color-line: var(--color-warm-200); --color-border-strong: var(--color-graphite-500); /* STATUS */ --color-status-success: var(--color-success); --color-status-error: var(--color-error); --color-status-warning: var(--color-warning); /* SPACING */ --spacing-component: var(--space-4); --spacing-element: var(--space-2); --spacing-section: var(--space-16); --spacing-section-sm: var(--space-10); --spacing-page: var(--space-24); /* TYPOGRAPHY */ --text-hero: var(--fs-hero); --text-h1: var(--fs-3xl); --text-h2: var(--fs-2xl); --text-h3: var(--fs-xl); --text-h4: var(--fs-lg); --text-lead: var(--fs-md); --text-body: var(--fs-sm); --text-caption: var(--fs-xs); /* LAYOUT */ --container-fullbleed: 100vw; --container-page-x: var(--page-padding-x); --container-prose: var(--prose-max); --container-grid: var(--grid-max); } /* ═══ LAYER 3: COMPONENTS ═══════════════════════════════════════ */ :root { /* BUTTON: primary */ --btn-primary-bg: var(--color-primary); --btn-primary-fg: var(--color-primary-fg); --btn-primary-hover-bg: var(--color-primary-hover); --btn-primary-padding-x: var(--space-6); --btn-primary-padding-y: var(--space-3); --btn-primary-radius: var(--radius-md); --btn-primary-font-weight: var(--fw-semibold); /* BUTTON: accent */ --btn-accent-bg: var(--color-accent); --btn-accent-fg: var(--color-accent-fg); --btn-accent-hover-bg: var(--color-accent-hover); /* BUTTON: secondary outlined */ --btn-secondary-bg: transparent; --btn-secondary-fg: var(--color-fg); --btn-secondary-border: var(--color-border-strong); --btn-secondary-hover-bg: var(--color-bg-subtle); /* CARD */ --card-bg: var(--color-bg-surface); --card-border: var(--color-border); --card-padding: var(--space-6); --card-radius: var(--radius-lg); --card-shadow: var(--shadow-sm); --card-shadow-hover: var(--shadow-md); /* INPUT */ --input-bg: var(--color-paper); --input-fg: var(--color-fg); --input-border: var(--color-border); --input-focus-ring: var(--color-accent); --input-padding-x: var(--space-4); --input-padding-y: var(--space-3); --input-radius: var(--radius-sm); /* HEADER */ --header-bg: var(--color-bg); --header-border: var(--color-line); --header-fg: var(--color-fg); /* TOP-NOTE */ --top-note-bg: var(--color-bg-inverse); --top-note-fg: var(--color-fg-inverse); /* HERO */ --hero-bg: var(--color-bg-subtle); --hero-grid-overlay: rgba(122, 119, 115, 0.08); /* EYEBROW */ --eyebrow-fg: var(--color-fg-subtle); --eyebrow-letter-spacing: 0.04em; --eyebrow-text-transform: uppercase; /* CHIP */ --chip-bg: var(--color-bg); --chip-border: var(--color-border); --chip-fg: var(--color-fg); --chip-radius: var(--radius-pill); --chip-padding: var(--space-2) var(--space-4); }