/* =================================================================== Открой Ямал — токены дизайн-системы (светлая тема «Арктический Север») ЗЕРКАЛО дизайн-системы. Источник: design-system/project/tokens/*.css (colors / typography / spacing / effects). При обновлении дизайн-системы обновляйте ЗНАЧЕНИЯ здесь — потребители (home.css и др.) ссылаются только на эти переменные, не на сырые HEX. См. docs/DESIGN.md. Шрифты (Unbounded / Onest) подключаются в страницы. =================================================================== */ :root{ /* ===== colors.css : slate neutrals ===== */ --slate-50:#F5F8FB; --slate-100:#E9F0F6; --slate-200:#D6E1EC; --slate-300:#B6C8D8; --slate-400:#8497AC; --slate-500:#5C7185; --slate-600:#415567; --slate-700:#2A3C4E; --slate-800:#16293B; --slate-900:#0B1B2E; --slate-950:#061320; /* ===== colors.css : aurora (signature teal-green) ===== */ --aurora-50:#E6FBF4; --aurora-100:#C5F4E3; --aurora-200:#95E9CD; --aurora-300:#6FE0C0; --aurora-400:#36D2A6; --aurora-500:#14C39A; --aurora-600:#0BA382; --aurora-700:#0A8268; --aurora-800:#0B6553; /* ===== colors.css : cloudberry (warm amber) ===== */ --berry-50:#FFF4E9; --berry-100:#FFE5CC; --berry-200:#FFCB99; --berry-300:#FFB066; --berry-400:#FF9A3C; --berry-500:#F77F1C; --berry-600:#DC640A; /* ===== colors.css : polar cyan / lingonberry red / violet / pure ===== */ --polar-300:#8DD7F5; --polar-400:#4FBEEC; --polar-500:#2FA8E0; --polar-600:#1E86BC; --red-400:#F4666B; --red-500:#E5484D; --red-600:#C53034; --violet-400:#7B5CFF; --white:#FFFFFF; --black:#050D16; /* ===== colors.css : gradients ===== */ --gradient-aurora:linear-gradient(120deg,#14C39A 0%,#2FA8E0 48%,#7B5CFF 100%); --gradient-night: linear-gradient(160deg,#0B1B2E 0%,#122B43 60%,#0A8268 140%); --gradient-berry: linear-gradient(120deg,#FF9A3C 0%,#F77F1C 100%); --gradient-snow: linear-gradient(180deg,#FFFFFF 0%,#F1F6FA 100%); /* ===== colors.css : semantic aliases (используйте ИХ в компонентах) ===== */ --brand:var(--aurora-500); --brand-strong:var(--aurora-600); --brand-soft:var(--aurora-50); --accent:var(--berry-400); --accent-strong:var(--berry-500); --accent-soft:var(--berry-50); --text-strong:var(--slate-900); --text-body:var(--slate-700); --text-muted:var(--slate-500); --text-faint:#5F7488; /* T7: slate-400(#8497AC) давал 2.8:1 на белом (мимо AA); #5F7488 ≈ 4.85:1, чуть светлее muted */ --text-on-dark:#EAF2F8; --text-on-dark-muted:#9FB4C6; --text-on-brand:#05231C; --text-link:var(--polar-600); --surface-page:var(--slate-50); --surface-card:var(--white); --surface-sunken:var(--slate-100); --surface-night:var(--slate-900); --surface-night-2:var(--slate-800); --border-subtle:var(--slate-200); --border-default:var(--slate-300); --border-strong:var(--slate-400); --success:var(--aurora-600); --warning:var(--berry-500); --danger:var(--red-500); --info:var(--polar-500); --focus-ring:rgba(20,195,154,.45); /* ===== typography.css : families / weights ===== */ --font-display:'Unbounded','Onest',system-ui,sans-serif; --font-sans:'Onest',system-ui,-apple-system,'Segoe UI',sans-serif; --font-mono:'IBM Plex Mono',ui-monospace,'SF Mono',monospace; --fw-light:300; --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-black:800; /* ===== typography.css : scale ===== */ --text-hero:clamp(40px,6vw,76px); --text-display-1:clamp(36px,4.6vw,60px); --text-display-2:clamp(30px,3.4vw,44px); --text-h1:clamp(28px,2.8vw,38px); --text-h2:clamp(24px,2.2vw,30px); --text-h3:22px; --text-h4:18px; --text-body-lg:18px; --text-body:16px; --text-sm:14px; --text-xs:13px; --text-overline:12px; --lh-tight:1.05; --lh-snug:1.2; --lh-normal:1.45; --lh-relaxed:1.6; --ls-tight:-0.03em; --ls-snug:-0.015em; --ls-normal:0; --ls-wide:0.04em; --ls-overline:0.14em; /* ===== spacing.css : grid + layout ===== */ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-7:32px; --space-8:40px; --space-9:48px; --space-10:64px; --space-11:80px; --space-12:96px; --space-13:128px; --container-max:1200px; --container-wide:1320px; --gutter:clamp(16px,4vw,48px); --section-y:clamp(56px,8vw,104px); /* ===== effects.css : radius / borders / shadows / motion / blur ===== */ --radius-xs:8px; --radius-sm:12px; --radius-md:16px; --radius-lg:20px; --radius-xl:28px; --radius-2xl:36px; --radius-card:24px; --radius-pill:999px; --border-subtle-w:1px solid var(--border-subtle); --shadow-xs:0 1px 2px rgba(11,27,46,.06); --shadow-sm:0 2px 8px rgba(11,27,46,.07); --shadow-md:0 10px 28px rgba(11,27,46,.10); --shadow-lg:0 20px 48px rgba(11,27,46,.14); --shadow-xl:0 32px 72px rgba(11,27,46,.18); --shadow-aurora:0 22px 60px rgba(20,195,154,.28); --shadow-berry:0 18px 44px rgba(247,127,28,.26); --ease-out:cubic-bezier(.22,1,.36,1); --ease-in-out:cubic-bezier(.65,0,.35,1); --ease-spring:cubic-bezier(.34,1.56,.64,1); --dur-fast:140ms; --dur-base:220ms; --dur-slow:380ms; --blur-glass:blur(18px) saturate(140%); }