/* SerialCars — слой токенов. Единственное место, где живут сырые значения. Правило: в компонентах допускаются только var(--token, фолбэк). */ :root{ /* ===== отступы: сетка 4px ===== */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-6:24px; --sp-8:32px; --sp-12:48px; --sp-16:64px; /* ===== типографика: размер + фиксированный line-height ===== */ --font-sans:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif; --font-display:"Unbounded",var(--font-sans); --font-mono:"JetBrains Mono",ui-monospace,"SF Mono",monospace; --fs-12:12px; --lh-12:16px; --fs-14:14px; --lh-14:20px; --fs-16:16px; --lh-16:24px; --fs-20:20px; --lh-20:28px; --fs-24:24px; --lh-24:32px; --fs-32:32px; --lh-32:38px; --fs-40:40px; --lh-40:46px; --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-black:800; --tracking-tight:-.02em; --tracking-wide:.08em; /* заголовки первого экрана и секций — плавные, но из той же шкалы */ --fs-display:clamp(var(--fs-40),6.2vw,84px); --fs-h2:clamp(var(--fs-24),3.4vw,var(--fs-40)); /* ===== палитра ролями: тёмная тема (основная) ===== */ --surface:#07090D; /* фон страницы */ --surface-muted:#0C0F15; /* секция-подложка */ --surface-raised:#12161E; /* карточка, панель */ --surface-raised-2:#171C26; /* вложенный блок внутри карточки */ --surface-sunken:#040507; /* подвал, галерея */ --surface-inverse:#F2F3F5; /* светлая вставка: калькулятор, форма */ --border:rgba(255,255,255,.08); --border-strong:rgba(255,255,255,.14); --border-inverse:rgba(0,0,0,.12); --text:#F2F3F5; --text-muted:#A7B0BE; /* поднят до 4.5:1 на surface-raised */ --text-subtle:#8A93A3; /* служебные подписи, тоже проходит норму */ --text-inverse:#0B0D12; --text-inverse-muted:#4B5262; --accent:#E02D1F; --accent-hover:#FF5240; --accent-soft:#FF7A45; --accent-contrast:#FFFFFF; --accent-text:#FF5240; --accent-text-inverse:#D42417; --success-text-inverse:#137A41; /* для светлой вставки внутри тёмной темы */ /* акцент как ТЕКСТ на тёмном: 6.2:1 на фоне, 5.6:1 на карточке */ --accent-ghost:rgba(224,45,31,.18); --success:#37D67A; --success-ghost:rgba(55,214,122,.18); --success-text:#37D67A; /* успех как ТЕКСТ на тёмном: 10.7:1 */ --warning:#F5B301; --danger:#FF5A4E; --overlay:rgba(4,5,7,.78); /* ===== радиусы ===== */ --radius-sm:8px; --radius-md:12px; --radius-lg:18px; --radius-xl:26px; --radius-full:999px; /* ===== тени ===== */ --shadow-sm:0 4px 12px rgba(0,0,0,.28); --shadow-md:0 12px 32px rgba(0,0,0,.38); --shadow-lg:0 32px 72px rgba(0,0,0,.52); --shadow-accent:0 12px 32px rgba(224,45,31,.38); --ring:0 0 0 2px var(--surface),0 0 0 4px var(--accent); /* видимый фокус */ /* ===== движение ===== */ --dur-fast:120ms; --dur-base:200ms; --dur-slow:420ms; --ease:cubic-bezier(.2,.7,.2,1); /* два набора: контейнеры не анимируют цвет (иначе смена темы через переменную застревает), интерактив — анимирует */ --tr-surface:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-base) var(--ease),transform var(--dur-base) var(--ease),opacity var(--dur-base) var(--ease); --tr-control:color var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),box-shadow var(--dur-base) var(--ease),transform var(--dur-base) var(--ease),opacity var(--dur-base) var(--ease); /* ===== слои ===== */ --z-base:1; --z-raised:2; --z-sticky:1100; --z-dropdown:1000; --z-overlay:1200; --z-modal:1300; --z-toast:1400; --z-loader:1500; /* ===== размеры ===== */ --page:1320px; --header-h:74px; } /* Светлая тема: включается атрибутом data-theme="light" на . Роли те же, значения другие — компоненты не меняются. */ :root[data-theme="light"]{ --surface:#F4F6FA; --surface-muted:#EDF0F6; --surface-raised:#FFFFFF; --surface-raised-2:#F4F6FA; --surface-sunken:#E7EBF2; --surface-inverse:#0C0F15; --border:rgba(11,13,18,.10); --border-strong:rgba(11,13,18,.18); --border-inverse:rgba(255,255,255,.14); --text:#0B0D12; --text-muted:#4B5262; --text-subtle:#5D6575; --text-inverse:#F2F3F5; --text-inverse-muted:#A7B0BE; --success-text:#137A41; /* успех как текст на светлом: 4.5:1 на подложке, 5.4:1 на белом */ --accent-text:#D42417; --accent-text-inverse:#FF5240; --success-text-inverse:#37D67A; /* вставка здесь тёмная — цвета зеркалим */ /* акцент как текст на светлом: 4.8:1 на фоне, 5.2:1 на карточке */ --overlay:rgba(11,13,18,.5); --shadow-sm:0 4px 12px rgba(11,13,18,.08); --shadow-md:0 12px 32px rgba(11,13,18,.12); --shadow-lg:0 32px 72px rgba(11,13,18,.18); --ring:0 0 0 2px var(--surface),0 0 0 4px var(--accent); } /* На время переключения темы переходы выключаются полностью, чтобы не было промежуточных цветов. */ :root[data-theme-switching] *,:root[data-theme-switching] *::before,:root[data-theme-switching] *::after{transition:none!important}