/* Aegis design tokens. Единый источник значений для всех экранов. Палитра снята с концепт-артов (design/references, design/Aegis_concept.pdf): черный фон, приподнятые карточки, зеленый акцент, белый основной / серый вторичный текст, белая CTA-кнопка. Точные hex - здесь; компоненты ссылаются только на переменные. */ :root { /* Отступ под полоску iPhone. ЗАМОРОЖЕН на старте (app.js: freezeSafeArea): живое env(safe-area-inset-bottom) на iOS меняется при сворачивании панели браузера, и нижний таб-бар из-за этого ездил вверх-вниз (жалоба 05.08). Здесь запасное значение на случай, если JS не отработал. */ /* Резерв под полоску home indicator. Ноль ставить нельзя: иконки залезают на полоску и по ним неудобно попадать (жалоба 06.08). Потолок держим, чтобы в браузере величина не раздувалась панелью Safari. */ --sab: min(env(safe-area-inset-bottom, 0px), 22px); /* --- Поверхности (фон приложения и карточек) --- */ --bg: #000000; /* фон приложения - чистый черный */ --surface: #171717; /* карточка: отличима от фона (было #0e0e0e - контраст 1.09) */ --surface-2: #202020; /* поле ввода / вложенный элемент */ --border: #2e2e2e; /* волосяная граница карточек и полей */ /* --- Акцент (зеленый) --- */ --accent: #5bbf50; /* основной зеленый: кольца, галки, выполнено */ --accent-dim: #2f5a2c; /* приглушенный зеленый (номер/обводка выполненного) */ --accent-wash: rgba(91,191,80,0.10); /* легкая зеленая заливка карточки-выполнено */ /* --- Текст --- */ --text: #ffffff; /* основной текст */ --text-2: #9a9a9a; /* вторичный текст (подписи, Today, Completed) */ --text-3: #8f8f8f; /* приглушенный: лейблы секций (было #6b6b6b - 3.9:1, мало) */ /* --- CTA (белая кнопка действия) --- */ --cta-bg: #ffffff; --cta-fg: #000000; /* --- Прочие статусные цвета --- */ --danger: #e5484d; --neutral-track: #242424; /* дорожка прогресс-бара / серые кольца */ /* --- Зоны восстановления (кольцо Body): green/yellow/red по порогам WHOOP 67/34. Цвета ФИКСИРОВАНЫ как у WHOOP и не зависят от темы/акцента (правка Ивана 03.08). --- */ --zone-green: #16ec06; --zone-yellow: #ffde00; --zone-red: #ff0026; /* --- Радиусы --- */ --r-card: 16px; --r-field: 14px; --r-sm: 10px; --r-pill: 999px; /* --- Отступы (шаг 4px) --- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; /* --- Габариты сетки/экрана --- */ --app-max: 480px; /* ширина под телефон, центрируем на десктопе */ --page-pad: 20px; /* боковые поля экрана */ --tabbar-h: 62px; /* иконка + постоянная текстовая подпись */ /* --- Типографика --- */ --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --fs-wordmark: 20px; /* AEGIS-логотип (ужат 06.08 вместе с шапкой) */ --fs-h1: 22px; /* заголовок экрана (Build, This week) */ --fs-num: 34px; /* крупная цифра (номер приоритета, калории) */ --fs-num-lg: 44px; /* очень крупная цифра (кольцо recovery) */ --fs-title: 19px; /* заголовок в карточке */ --fs-body: 15px; /* обычный текст */ --fs-sub: 14px; /* вторичный текст, не мельче комфортного на телефоне */ --fs-label: 14px; /* секционный заголовок */ --lh-tight: 1.1; --lh-body: 1.35; --tracking-wide: 0.18em; /* трекинг логотипа/лейблов */ --tracking-label: 0.02em; /* --- Тени/переходы --- */ --tap: 120ms ease; /* отклик на нажатие */ } /* ============ Темы и акценты (правка Ивана 02.08) ============ Переключатель в шестеренке ставит data-theme и data-accent на , значения переопределяют базовые токены - весь интерфейс перекрашивается. */ :root[data-theme="light"] { --bg: #f7f7f8; --surface: #ffffff; --surface-2: #ececee; --border: #dcdce0; --text: #111113; --text-2: #5c5c66; --text-3: #6e6e78; --cta-bg: #111113; --cta-fg: #ffffff; --neutral-track: #dcdce0; } :root[data-accent="orange"] { --accent: #f08a24; --accent-dim: #6b3c10; --accent-wash: rgba(240,138,36,0.12); } :root[data-accent="cyan"] { --accent: #35b8d8; --accent-dim: #14515f; --accent-wash: rgba(53,184,216,0.12); } :root[data-accent="blue"] { --accent: #4f7ff0; --accent-dim: #1f3670; --accent-wash: rgba(79,127,240,0.12); } :root[data-accent="red"] { --accent: #e5484d; --accent-dim: #6d1f22; --accent-wash: rgba(229,72,77,0.12); } :root[data-accent="green"] { --accent: #5bbf50; --accent-dim: #2f5a2c; --accent-wash: rgba(91,191,80,0.10); }