/* Zeo Topup TMA — дизайн-токены. * * Источник — реальные файлы дизайн-системы, не их пересказ: * design_handoff_tma/design/_ds/zeo-topup-design-system-*/tokens/{colors, * fonts,typography,spacing,radius,shadows,motion,semantic,theme-dark}.css. * Значения скопированы буквально (copy, не retype) — опечатка в цвете не * видна на code review и видна на экране телефона. * * Одно сознательное отличие от источника: `tokens/fonts.css` там грузит * шрифты через `@import url(fonts.googleapis.com/...)` — сюда попадают * только сами `--font-*` имена семейств (WP9 самохостит файлы шрифтов, * `css/fonts.css`, который объявляет `@font-face` под теми же именами * семейств — 'Onest' / 'Golos Text' / 'JetBrains Mono' — так что переменные * ниже работают одинаково с любым источником начертаний). * * Второе отличие: `applyTheming()` прототипа (JS, который дёргает токены * во время рантайма для панели дизайнера) сюда не идёт — это * инструментальная обвязка, а не часть дизайн-системы (см. также * screens_products.md §11 / screens_orders.md). * * Тёмная тема переключается атрибутом `data-theme="dark"` на — * в Telegram Mini App его ставит `js/telegram.js` из * `Telegram.WebApp.colorScheme` (см. `tokens/theme-dark.css` в источнике). * Базовая палитра (colors.css) в тёмной теме не меняется — переопределяются * только семантические алиасы. */ :root{ /* === colors.css: нейтрали — холодный подтон, никогда чистый серый === */ --white:#FFFFFF; --n-25:#FBFCFE; --n-50:#F5F7FB; --n-100:#EDF0F7; --n-200:#DFE4EF; --n-300:#C6CEDF; --n-400:#9AA5BD; --n-500:#6F7C97; --n-600:#4E5A73; --n-700:#374156; --n-800:#222B3D; --n-900:#131A28; --n-950:#0A0F19; /* Zeo Blue — основной */ --blue-25:#F4F8FF; --blue-50:#EAF1FF; --blue-100:#D6E4FF; --blue-200:#B3CCFF; --blue-300:#85ADFF; --blue-400:#5589FF; --blue-500:#2E6BFF; --blue-600:#1550E0; --blue-700:#103FB0; --blue-800:#0D3183; --blue-900:#0B2358; /* Telegram sky — только для телеграм-семейства продуктов */ --tg-100:#DCF2FC; --tg-300:#7FD3F2; --tg-500:#2AABEE; --tg-700:#1789C4; /* Steam navy — только для Steam-семейства продуктов */ --steam-100:#DCE7F5; --steam-300:#66C0F4; --steam-700:#2A475E; --steam-900:#16202D; /* Семантические оттенки */ --green-50:#E6F7EE; --green-500:#12A150; --green-700:#0B7237; --amber-50:#FFF5E1; --amber-500:#F5A524; --amber-700:#B26B00; --red-50:#FDECEC; --red-500:#E5484D; --red-700:#B01B21; /* Star gold — только Telegram Stars */ --star-100:#FFF1CC; --star-500:#F2B01E; /* Alpha-утилиты */ --alpha-ink-04:rgba(19,26,40,.04); --alpha-ink-08:rgba(19,26,40,.08); --alpha-ink-12:rgba(19,26,40,.12); --alpha-blue-08:rgba(46,107,255,.08); --alpha-blue-16:rgba(46,107,255,.16); --alpha-white-70:rgba(255,255,255,.7); /* === fonts.css: только имена семейств — файлы шрифтов см. css/fonts.css === */ --font-display:"Onest","Helvetica Neue",Arial,sans-serif; --font-ui:"Onest","Helvetica Neue",Arial,sans-serif; --font-body:"Golos Text","Onest",Arial,sans-serif; --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace; /* === typography.css: шкала кеглей === */ --fs-display-1:64px; --lh-display-1:1.02; --ls-display-1:-0.03em; --fs-display-2:48px; --lh-display-2:1.06; --ls-display-2:-0.028em; --fs-h1:36px; --lh-h1:1.12; --ls-h1:-0.024em; --fs-h2:28px; --lh-h2:1.18; --ls-h2:-0.02em; --fs-h3:22px; --lh-h3:1.25; --ls-h3:-0.016em; --fs-h4:18px; --lh-h4:1.33; --ls-h4:-0.012em; --fs-body-lg:17px; --lh-body-lg:1.55; --ls-body-lg:-0.006em; --fs-body:15px; --lh-body:1.6; --ls-body:-0.004em; --fs-body-sm:13px; --lh-body-sm:1.5; --ls-body-sm:0em; --fs-caption:12px; --lh-caption:1.4; --ls-caption:0.01em; --fs-overline:11px; --lh-overline:1.2; --ls-overline:0.08em; --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-black:800; /* Цифры: цены, балансы и id всегда выравниваются */ --num-tabular:"tnum" 1,"lnum" 1; /* === spacing.css: сетка 4px === */ --space-0:0px; --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-32:128px; --container-max:1200px; --container-narrow:720px; --gutter:24px; --section-y:96px; --section-y-compact:64px; /* === radius.css === */ --radius-xs:6px; --radius-sm:10px; --radius-md:14px; --radius-lg:20px; --radius-xl:28px; --radius-2xl:36px; --radius-pill:999px; --radius-control:12px; --radius-card:20px; --radius-surface:28px; /* === shadows.css: синий подтон, никогда нейтральный чёрный === */ --shadow-xs:0 1px 2px rgba(13,49,131,.06); --shadow-sm:0 2px 6px rgba(13,49,131,.06),0 1px 2px rgba(13,49,131,.04); --shadow-md:0 8px 24px rgba(13,49,131,.08),0 2px 6px rgba(13,49,131,.04); --shadow-lg:0 20px 48px rgba(13,49,131,.10),0 4px 12px rgba(13,49,131,.05); --shadow-xl:0 32px 80px rgba(13,49,131,.14),0 8px 20px rgba(13,49,131,.06); --shadow-primary:0 8px 20px rgba(46,107,255,.28); --shadow-primary-press:0 3px 8px rgba(46,107,255,.24); --ring-focus:0 0 0 3px rgba(46,107,255,.28); --ring-danger:0 0 0 3px rgba(229,72,77,.24); --inner-hairline:inset 0 0 0 1px var(--alpha-ink-08); /* === motion.css: быстро, уверенно, без пружин === */ --dur-instant:90ms; --dur-fast:140ms; --dur-base:200ms; --dur-slow:320ms; --dur-page:480ms; --ease-standard:cubic-bezier(.2,.8,.2,1); --ease-out:cubic-bezier(.16,1,.3,1); --ease-in:cubic-bezier(.5,0,.9,.2); --transition-control:background-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),transform var(--dur-instant) var(--ease-standard); /* === semantic.css: компоненты ссылаются ТОЛЬКО на эти алиасы === */ /* Текст */ --text-primary:var(--n-900); --text-secondary:var(--n-600); --text-tertiary:var(--n-500); --text-disabled:var(--n-400); --text-inverse:var(--white); --text-brand:var(--blue-600); --text-success:var(--green-700); --text-warning:var(--amber-700); --text-danger:var(--red-700); --text-link:var(--blue-600); --text-link-hover:var(--blue-700); /* Поверхности */ --surface-page:var(--n-50); --surface-card:var(--white); --surface-raised:var(--white); --surface-sunken:var(--n-100); --surface-brand:var(--blue-500); --surface-brand-soft:var(--blue-50); --surface-brand-deep:var(--blue-900); --surface-overlay:rgba(10,15,25,.48); --surface-glass:rgba(255,255,255,.72); --surface-success-soft:var(--green-50); --surface-warning-soft:var(--amber-50); --surface-danger-soft:var(--red-50); /* Границы */ --border-subtle:var(--n-200); --border-default:var(--n-300); --border-strong:var(--n-400); --border-brand:var(--blue-500); --border-danger:var(--red-500); /* Контролы */ --control-primary-bg:var(--blue-500); --control-primary-bg-hover:var(--blue-600); --control-primary-bg-press:var(--blue-700); --control-secondary-bg:var(--white); --control-secondary-bg-hover:var(--n-50); --control-ghost-bg-hover:var(--alpha-blue-08); --control-height-sm:36px; --control-height-md:44px; --control-height-lg:54px; /* Акценты продуктов */ --product-steam:var(--steam-900); --product-steam-soft:var(--steam-100); --product-telegram:var(--tg-500); --product-telegram-soft:var(--tg-100); --product-stars:var(--star-500); --product-stars-soft:var(--star-100); /* Фирменные градиенты — использовать редко, только на брендовых поверхностях */ --gradient-brand:linear-gradient(135deg,#2E6BFF 0%,#1550E0 52%,#0D3183 100%); --gradient-sky:linear-gradient(180deg,#F4F8FF 0%,#FFFFFF 100%); --gradient-halo:radial-gradient(60% 80% at 50% 0%,rgba(46,107,255,.16) 0%,rgba(46,107,255,0) 70%); } /* === theme-dark.css: переопределяются ТОЛЬКО семантические алиасы — базовая палитра выше не меняется. === */ [data-theme="dark"]{ --text-primary:#E9EDF5; --text-secondary:#A6B1C4; --text-tertiary:#7C8899; --text-disabled:#5A6577; --text-inverse:#0F141C; --text-brand:#7FA6FF; --text-success:#4BD07E; --text-warning:#F5C25A; --text-danger:#FF8A8E; --text-link:#7FA6FF; --text-link-hover:#A9C3FF; --surface-page:#0F141C; --surface-card:#171E29; --surface-raised:#1E2634; --surface-sunken:#121822; --surface-brand:var(--blue-500); --surface-brand-soft:rgba(46,107,255,.14); --surface-brand-deep:#0B2358; --surface-overlay:rgba(5,8,13,.62); --surface-glass:rgba(23,30,41,.76); --surface-success-soft:rgba(18,161,80,.14); --surface-warning-soft:rgba(245,165,36,.14); --surface-danger-soft:rgba(229,72,77,.14); --border-subtle:#26303F; --border-default:#33404F; --border-strong:#455263; --border-brand:var(--blue-400); --control-secondary-bg:#1E2634; --control-secondary-bg-hover:#26303F; --control-ghost-bg-hover:rgba(46,107,255,.18); --product-steam-soft:rgba(102,192,244,.14); --product-telegram-soft:rgba(42,171,238,.14); --product-stars-soft:rgba(242,176,30,.16); --shadow-xs:0 1px 2px rgba(0,0,0,.4); --shadow-sm:0 2px 6px rgba(0,0,0,.35); --shadow-md:0 8px 24px rgba(0,0,0,.4); --shadow-lg:0 20px 48px rgba(0,0,0,.46); --shadow-xl:0 32px 80px rgba(0,0,0,.55); --shadow-primary:0 8px 20px rgba(46,107,255,.36); --inner-hairline:inset 0 0 0 1px rgba(255,255,255,.08); --gradient-sky:linear-gradient(180deg,#141B26 0%,#0F141C 100%); --gradient-halo:radial-gradient(60% 80% at 50% 0%,rgba(46,107,255,.22) 0%,rgba(46,107,255,0) 70%); /* Не переопределены в тёмной теме (совпадают со светлой, как в источнике): --surface-brand, --shadow-primary-press, --ring-focus, --ring-danger, --gradient-brand, --border-danger, --product-steam/--product-telegram/ --product-stars (не soft-варианты) и вся сырая палитра выше. */ }