/* ============================================================ get.nullpath.ru — дизайн-токены страницы скачивания Источник палитры: shared/ui/theme/Theme.kt (KMP-клиент, Telegram-style). Значения 1:1 из приложения, кроме токенов, помеченных [derived] — они добавлены для веба (контраст AA). Темы: авто по prefers-color-scheme; принудительно — (переключатель не обязателен, атрибут нужен только для отладки/превью). ============================================================ */ /* ---------- 1. Базовые (не зависят от темы) ---------- */ :root { /* Бренд */ --cm-accent: #2AABEE; /* AccentBlue — иконки, ссылки (dark), focus */ --cm-green: #4FAE4E; /* TelegramGreen — success-иконки */ /* Типографика — только системные шрифты (закрытый контур) */ --cm-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --cm-font-mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace; /* версии, размеры файлов */ --cm-fs-caption: 0.8125rem; /* 13px — мета: дата, размер */ --cm-fs-body: 0.9375rem; /* 15px — основной текст */ --cm-fs-input: 1rem; /* 16px — поля ввода (не даёт зум на iOS) */ --cm-fs-title: 1.0625rem; /* 17px — заголовок карточки */ --cm-fs-h2: 1.25rem; /* 20px — заголовки секций */ --cm-fs-h1: 1.75rem; /* 28px — заголовок страницы */ --cm-lh-tight: 1.25; --cm-lh-body: 1.45; --cm-fw-regular: 400; --cm-fw-medium: 500; --cm-fw-semibold: 600; /* Отступы — шкала 4px */ --cm-sp-1: 0.25rem; /* 4px */ --cm-sp-2: 0.5rem; /* 8px */ --cm-sp-3: 0.75rem; /* 12px */ --cm-sp-4: 1rem; /* 16px */ --cm-sp-5: 1.5rem; /* 24px */ --cm-sp-6: 2rem; /* 32px */ --cm-sp-7: 3rem; /* 48px */ /* Радиусы (скругления как в клиенте: мягкие, Telegram-style) */ --cm-r-input: 10px; --cm-r-btn: 10px; --cm-r-card: 14px; --cm-r-badge: 999px; --cm-r-icon: 12px; /* плашка под иконкой платформы */ /* Анимация */ --cm-t-fast: 120ms; /* hover, focus */ --cm-t-base: 200ms; /* появление ошибок, смена состояний */ --cm-t-slow: 320ms; /* skeleton, разворачивание «что нового» */ --cm-ease: cubic-bezier(0.25, 0.1, 0.25, 1); --cm-ease-out: cubic-bezier(0, 0, 0.2, 1); /* Фокус — одинаков в обеих темах */ --cm-focus-ring: 0 0 0 2px var(--cm-bg), 0 0 0 4px var(--cm-accent); /* Ширины макета */ --cm-w-login: 400px; /* карточка входа */ --cm-w-page: 960px; /* контент экрана загрузок */ } /* ---------- 2. Светлая тема (по умолчанию) ---------- */ :root { color-scheme: light; --cm-bg: #EFEFF4; /* LightBg */ --cm-surface: #FFFFFF; /* LightSurface — карточки */ --cm-surface-2: #E5E5EB; /* LightSurface2 — плашки, skeleton */ --cm-input-bg: #FFFFFF; --cm-divider: #E0E0E0; /* LightDivider */ --cm-text: #1A1A1A; /* TextPrimaryLight */ --cm-text-secondary: #6E6E73; /* TextSecondaryLight */ --cm-link: #168ACD; /* LinkOnBubbleLight — 3.9:1, только UI/крупный */ /* [derived] Заливка primary-кнопки. AccentBlue #2AABEE даёт лишь 2.6:1 с белым текстом — для AA затемнён до 5.0:1. */ --cm-btn-primary-bg: #1374B3; --cm-btn-primary-bg-hover: #0F639A; --cm-btn-primary-bg-active:#0D5787; --cm-btn-primary-fg: #FFFFFF; /* [derived] Статусы (в палитре приложения нет — добавлены) */ --cm-danger: #C62828; /* текст ошибки, 5.7:1 на белом */ --cm-danger-bg: #FCEAEA; /* плашка ошибки */ --cm-danger-brd: #F0BDBD; --cm-success: #2F7A2E; /* текст успеха (green 4FAE4E — только иконки) */ --cm-success-bg: #E9F5E9; /* Карточка «ваша система» */ --cm-highlight-brd: var(--cm-accent); --cm-highlight-bg: #F3FAFE; /* [derived] AccentBlue 5% на белом */ --cm-shadow-card: 0 1px 2px rgba(16, 24, 32, 0.06), 0 4px 16px rgba(16, 24, 32, 0.06); --cm-shadow-hover: 0 2px 4px rgba(16, 24, 32, 0.08), 0 8px 24px rgba(16, 24, 32, 0.10); --cm-skeleton-a: #E5E5EB; --cm-skeleton-b: #F4F4F7; } /* ---------- 3. Тёмная тема ---------- */ @media (prefers-color-scheme: dark) { :root { color-scheme: dark; --cm-bg: #0F1923; /* DarkBg */ --cm-surface: #17212B; /* DarkSurface */ --cm-surface-2: #1C2733; /* DarkSurface2 */ --cm-input-bg: #182533; /* DarkInputBg */ --cm-divider: #1C2A35; /* DarkDivider */ --cm-text: #E8F1F8; /* TextPrimaryDark */ --cm-text-secondary: #7D9AB5; /* TextSecondaryDark */ --cm-link: #2AABEE; /* AccentBlue читаем на тёмном (5.9:1) */ --cm-btn-primary-bg: #1374B3; /* та же кнопка — консистентно */ --cm-btn-primary-bg-hover: #1786CF; --cm-btn-primary-bg-active:#0F639A; --cm-btn-primary-fg: #FFFFFF; --cm-danger: #FF6B64; --cm-danger-bg: #2A1A1C; --cm-danger-brd: #4A2528; --cm-success: #6BC96A; /* осветлённый TelegramGreen */ --cm-success-bg: #17281B; --cm-highlight-brd: var(--cm-accent); --cm-highlight-bg: #16242F; /* [derived] AccentBlue 8% на surface */ --cm-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.30), 0 4px 16px rgba(0, 0, 0, 0.25); --cm-shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.35); --cm-skeleton-a: #1C2733; --cm-skeleton-b: #223140; } } /* Принудительные темы (data-theme побеждает системную настройку) */ :root[data-theme="dark"] { color-scheme: dark; --cm-bg: #0F1923; --cm-surface: #17212B; --cm-surface-2: #1C2733; --cm-input-bg: #182533; --cm-divider: #1C2A35; --cm-text: #E8F1F8; --cm-text-secondary: #7D9AB5; --cm-link: #2AABEE; --cm-btn-primary-bg: #1374B3; --cm-btn-primary-bg-hover: #1786CF; --cm-btn-primary-bg-active: #0F639A; --cm-btn-primary-fg: #FFFFFF; --cm-danger: #FF6B64; --cm-danger-bg: #2A1A1C; --cm-danger-brd: #4A2528; --cm-success: #6BC96A; --cm-success-bg: #17281B; --cm-highlight-brd: var(--cm-accent); --cm-highlight-bg: #16242F; --cm-shadow-card: 0 1px 2px rgba(0,0,0,0.30), 0 4px 16px rgba(0,0,0,0.25); --cm-shadow-hover: 0 2px 4px rgba(0,0,0,0.35), 0 8px 24px rgba(0,0,0,0.35); --cm-skeleton-a: #1C2733; --cm-skeleton-b: #223140; } :root[data-theme="light"] { color-scheme: light; --cm-bg: #EFEFF4; --cm-surface: #FFFFFF; --cm-surface-2: #E5E5EB; --cm-input-bg: #FFFFFF; --cm-divider: #E0E0E0; --cm-text: #1A1A1A; --cm-text-secondary: #6E6E73; --cm-link: #168ACD; --cm-btn-primary-bg: #1374B3; --cm-btn-primary-bg-hover: #0F639A; --cm-btn-primary-bg-active: #0D5787; --cm-btn-primary-fg: #FFFFFF; --cm-danger: #C62828; --cm-danger-bg: #FCEAEA; --cm-danger-brd: #F0BDBD; --cm-success: #2F7A2E; --cm-success-bg: #E9F5E9; --cm-highlight-brd: var(--cm-accent); --cm-highlight-bg: #F3FAFE; --cm-shadow-card: 0 1px 2px rgba(16,24,32,0.06), 0 4px 16px rgba(16,24,32,0.06); --cm-shadow-hover: 0 2px 4px rgba(16,24,32,0.08), 0 8px 24px rgba(16,24,32,0.10); --cm-skeleton-a: #E5E5EB; --cm-skeleton-b: #F4F4F7; } /* ---------- 4. Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { :root { --cm-t-fast: 0ms; --cm-t-base: 0ms; --cm-t-slow: 0ms; } }