/* ========================================================================== КУЛЬТУРНЫЙ ЦЕНТР — ТОКЕНЫ ДИЗАЙН-СИСТЕМЫ -------------------------------------------------------------------------- Перенесено из Figma один в один: коллекции переменных «Primitives», «Color», «Spacing», «Radius», «Size» и стили текста. Ничего не выдумано — значения совпадают с макетом посимвольно. Правило: в вёрстке не должно быть ни одного цвета или отступа числом. Всё только через переменные отсюда. ========================================================================== */ :root { /* ── Примитивы: бренд ──────────────────────────────────────────────── */ --brand-50: #eef2ff; --brand-100: #e0e7ff; --brand-200: #c7d2fe; --brand-300: #a5b4fc; --brand-400: #818cf8; --brand-500: #6366f1; --brand-600: #4f46e5; --brand-700: #4338ca; --brand-800: #3730a3; --brand-900: #312e81; /* ── Примитивы: акцент ─────────────────────────────────────────────── */ --accent-50: #fffbeb; --accent-100: #fef3c7; --accent-300: #fcd34d; --accent-500: #f59e0b; --accent-600: #d97706; /* ── Примитивы: серые ──────────────────────────────────────────────── */ --gray-0: #ffffff; --gray-50: #f8fafc; --gray-100: #f1f5f9; --gray-200: #e2e8f0; --gray-300: #cbd5e1; --gray-400: #94a3b8; --gray-500: #64748b; --gray-600: #475569; --gray-700: #334155; --gray-800: #1e293b; --gray-900: #0f172a; --gray-950: #020617; /* ── Примитивы: состояния ──────────────────────────────────────────── */ --green-50: #f0fdf4; --green-600: #16a34a; --red-50: #fef2f2; --red-500: #ef4444; --red-600: #dc2626; --amber-50: #fffbeb; --amber-600: #d97706; --black: #000000; /* ── Семантика: фон и поверхности ──────────────────────────────────── */ --bg-default: var(--gray-0); --bg-subtle: var(--gray-50); --bg-muted: var(--gray-100); --bg-inverse: var(--gray-900); --bg-brand: var(--brand-600); --bg-brand-hover: var(--brand-700); --bg-brand-pressed: var(--brand-800); --bg-brand-subtle: var(--brand-50); --bg-brand-subtle-hover: var(--brand-100); --bg-accent-subtle: var(--accent-50); --bg-neutral: var(--gray-100); --bg-neutral-hover: var(--gray-200); --bg-disabled: var(--gray-100); --surface-default: var(--gray-0); --surface-sunken: var(--gray-50); /* ── Семантика: текст ──────────────────────────────────────────────── */ --text-primary: var(--gray-900); --text-secondary: var(--gray-600); --text-muted: var(--gray-500); --text-inverse: var(--gray-0); --text-inverse-muted: var(--gray-400); --text-brand: var(--brand-600); --text-brand-hover: var(--brand-700); --text-on-brand: var(--gray-0); --text-accent: var(--accent-600); --text-disabled: var(--gray-400); /* ── Семантика: границы ────────────────────────────────────────────── */ --border-default: var(--gray-200); --border-strong: var(--gray-300); --border-brand: var(--brand-600); --border-inverse: var(--gray-700); --border-focus: var(--brand-500); --border-disabled: var(--gray-200); /* ── Семантика: состояния ──────────────────────────────────────────── */ --state-success: var(--green-600); --state-success-bg: var(--green-50); --state-error: var(--red-600); --state-error-bg: var(--red-50); --state-warning: var(--amber-600); --state-warning-bg: var(--amber-50); --overlay-scrim: rgb(0 0 0 / .45); /* ── Шаг отступов (коллекция Spacing) ──────────────────────────────── */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-30: 120px; /* ── Радиусы (коллекция Radius) ────────────────────────────────────── */ --radius-none: 0; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-2xl: 32px; --radius-full: 999px; /* ── Размеры (коллекция Size) ──────────────────────────────────────── */ --size-control-sm: 40px; --size-control-md: 48px; --size-control-lg: 56px; --size-icon-sm: 16px; --size-icon-md: 20px; --size-icon-lg: 24px; --size-icon-xl: 32px; --container: 1200px; --container-narrow: 760px; --header: 80px; --header-mobile: 64px; /* ── Тени (стили эффектов Figma) ───────────────────────────────────── */ --shadow-sm: 0 1px 2px rgb(15 23 42 / .06), 0 1px 3px rgb(15 23 42 / .10); --shadow-md: 0 4px 8px rgb(15 23 42 / .06), 0 2px 4px rgb(15 23 42 / .06); --shadow-lg: 0 8px 24px rgb(15 23 42 / .08), 0 2px 8px rgb(15 23 42 / .06); --shadow-xl: 0 24px 48px rgb(15 23 42 / .14); --focus-ring: 0 0 0 3px rgb(99 102 241 / .35); /* ── Шрифт ─────────────────────────────────────────────────────────── */ --font-sans: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; } /* ========================================================================== СТИЛИ ТЕКСТА — перенесены из Figma как есть (коллекция Text styles) Размер / интерлиньяж / начертание / трекинг совпадают с макетом. В разметке вешаются классом:

. ========================================================================== */ .t-display-xl { font-size: 56px; line-height: 64px; font-weight: 700; letter-spacing: -.02em; } .t-display-lg { font-size: 44px; line-height: 52px; font-weight: 700; letter-spacing: -.02em; } .t-display-md { font-size: 36px; line-height: 44px; font-weight: 700; letter-spacing: -.015em; } .t-h1 { font-size: 32px; line-height: 40px; font-weight: 700; letter-spacing: -.01em; } .t-h2 { font-size: 28px; line-height: 36px; font-weight: 600; letter-spacing: -.01em; } .t-h3 { font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -.01em; } .t-h4 { font-size: 20px; line-height: 28px; font-weight: 600; } .t-h5 { font-size: 18px; line-height: 26px; font-weight: 600; } .t-body-lg { font-size: 18px; line-height: 28px; font-weight: 400; } .t-body-lg-str { font-size: 18px; line-height: 28px; font-weight: 600; } .t-body-md { font-size: 16px; line-height: 24px; font-weight: 400; } .t-body-md-str { font-size: 16px; line-height: 24px; font-weight: 600; } .t-body-sm { font-size: 14px; line-height: 20px; font-weight: 400; } .t-body-sm-str { font-size: 14px; line-height: 20px; font-weight: 600; } .t-caption { font-size: 12px; line-height: 16px; font-weight: 500; } .t-overline { font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; } .t-link { font-size: 16px; line-height: 24px; font-weight: 500; } .t-btn-lg { font-size: 16px; line-height: 24px; font-weight: 600; } .t-btn-md { font-size: 14px; line-height: 20px; font-weight: 600; }