/* ============================================================ ТАХО-ТРЕНАЖЁР · ДИЗАЙН-ТОКЕНЫ (единый источник) Те же переменные используются на всех страницах сайта и переиспользуются в мобильном приложении. ============================================================ */ :root { color-scheme: light; /* --- ПОВЕРХНОСТИ --- */ --surface-bg: #EDF1F4; --surface-card: #FFFFFF; --surface-raised: #F8FAFC; /* --- ТЕКСТ --- */ --text-primary: #171C22; --text-secondary: #47525E; --text-muted: #78838F; --text-on-accent: #FFFFFF; /* --- БРЕНД-АКЦЕНТ (рабочий синий) --- */ --brand: #1D5FBF; --brand-hover: #17509F; --brand-active: #113E7C; --brand-soft: rgba(29,95,191,.10); /* --- БОРДЮРЫ --- */ --border: #D4DAE0; --divider: #E7EBEF; /* --- ФОКУС --- */ --focus: rgba(29,95,191,.40); /* --- СЕМАНТИКА СТАТУСОВ --- */ --success: #1E8A4C; --success-bg: #E4F3EA; --success-text: #135C33; --warning: #C07C0A; --warning-bg: #FBF0D6; --warning-text: #7F5300; --error: #C63A32; --error-bg: #FAE8E7; --error-text: #8E211B; --info: #1D6FBF; --info-bg: #E5EFFA; --info-text: #15477F; /* --- ТИПОГРАФИКА --- */ --font-sans: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; --fw-regular: 400; --fw-medium: 500; --fw-bold: 700; --fs-caption: 13px; --fs-sm: 15px; --fs-base: 18px; --fs-lg: 21px; --fs-h4: 25px; --fs-h3: 31px; --fs-h2: 39px; --fs-h1: 49px; --lh-tight: 1.15; --lh-snug: 1.35; --lh-body: 1.6; /* --- ОТСТУПЫ (4/8-based) --- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* --- РАДИУСЫ --- */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-full: 999px; /* --- ТЕНИ --- */ --shadow-sm: 0 1px 2px rgba(20,28,38,.06), 0 1px 1px rgba(20,28,38,.04); --shadow-md: 0 2px 6px rgba(20,28,38,.08), 0 1px 2px rgba(20,28,38,.05); --shadow-lg: 0 10px 28px rgba(20,28,38,.10), 0 3px 8px rgba(20,28,38,.06); /* --- КОНТЕЙНЕР / СЕТКА --- */ --container-max: 1200px; } /* ===== ТЁМНАЯ ТЕМА ===== Значения — из тёмной палитры приложения (ui_kit), чтобы сайт и приложение читались как один продукт. `data-theme` ставит скрипт в до отрисовки: 'system' резолвится в light/dark по prefers-color-scheme (см. Layout.astro). */ :root[data-theme="dark"] { color-scheme: dark; --surface-bg:#12161B; --surface-card:#1A2027; --surface-raised:#212933; --text-primary:#F2F5F8; --text-secondary:#AEB8C2; --text-muted:#7C8894; --text-on-accent:#FFFFFF; --brand:#4C8DE8; --brand-hover:#6BA2EE; --brand-active:#3B79D0; --brand-soft:rgba(76,141,232,.16); --border:#2C353F; --divider:#232B34; --focus:rgba(107,162,238,.50); --success:#2FA85F; --success-bg:#12301F; --success-text:#7FD3A0; --warning:#D79A2B; --warning-bg:#332608; --warning-text:#E7BE6B; --error:#D9564D; --error-bg:#331715; --error-text:#EE9A93; --info:#4C8DE8; --info-bg:#122536; --info-text:#8FBEF0; --shadow-sm:0 1px 2px rgba(0,0,0,.40); --shadow-md:0 2px 8px rgba(0,0,0,.45); --shadow-lg:0 12px 30px rgba(0,0,0,.55); } /* ===== РЕЖИМ «ЕЩЁ КРУПНЕЕ» ===== */ :root[data-textscale="large"] { --fs-caption:15px; --fs-sm:17px; --fs-base:21px; --fs-lg:24px; --fs-h4:29px; --fs-h3:36px; --fs-h2:45px; --fs-h1:56px; } /* ===== ВЫСОКИЙ КОНТРАСТ ===== */ :root[data-contrast="high"] { --text-primary:#000000; --text-secondary:#1E2731; --text-muted:#3A434D; --border:#5A6672; --divider:#8A96A2; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-body); color: var(--text-primary); background: var(--surface-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--brand); text-decoration: none; } a:hover { color: var(--brand-hover); text-decoration: underline; } :where(a,button,input,select,textarea,[tabindex]):focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm); } @keyframes om-spin { to { transform: rotate(360deg); } } @keyframes om-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } } @keyframes om-fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }