/* ========================================================================== tokens.css — Design tokens (Apple-style redesign, Wave 0 foundation) ========================================================================== Только CSS custom properties. Никакой конкретной вёрстки/классов здесь нет — компонентные классы см. components.css. НЕ подключён никуда (base.html и т.д.) — будет сделано в Волне 1. ========================================================================== */ :root { /* -------------------------------------------------------------------- Цвета — светлая тема (по умолчанию) -------------------------------------------------------------------- */ --color-bg: #f6f5f2; /* тёплый светлый фон (не клинический серый) */ --color-bg-elevated: #ffffff; /* фон приподнятых секций/панелей */ /* Едва заметное фоновое "свечение" — тёплый янтарь сверху-слева + холодный индиго снизу-справа. Создаёт ощущение глубины вместо плоского серого, оставаясь очень приглушённым (не отвлекает, не "кричит"). */ --bg-wash: radial-gradient(1100px circle at 12% -8%, rgba(255, 176, 105, 0.18), transparent 55%), radial-gradient(900px circle at 100% 8%, rgba(91, 99, 211, 0.15), transparent 50%); --color-surface: rgba(255, 254, 252, 0.72); /* полупрозрачная поверхность карточек (тёплый белый) */ --color-surface-solid: #ffffff; /* непрозрачный вариант той же поверхности */ --color-surface-hover: rgba(255, 255, 255, 0.92); --color-text-primary: #1d1d1f; /* основной текст, почти чёрный (apple-style) */ --color-text-secondary: #55555b; /* приглушённый вторичный текст (потемнее для читаемости) */ --color-text-tertiary: #8e8e93; /* ещё более приглушённый (плейсхолдеры, хинты) */ --color-border: #c9c4ba; /* тонкая граница (тёплый нейтральный, заметнее) */ --color-border-strong: #a8a29a; /* чуть заметнее — hover/focus состояния границ */ --color-divider: rgba(0, 0, 0, 0.09);/* тонкий разделитель строк/секций */ --color-accent: #5b63d3; /* спокойный индиго — приятнее плоского корп.синего */ --color-accent-hover: #6b73e0; --color-accent-active: #4a51b8; --color-accent-soft: rgba(91, 99, 211, 0.1); /* подложка под акцентными pill/фокусами */ --shadow-accent: 0 6px 16px rgba(91, 99, 211, 0.22); /* мягкое "свечение" для primary hover */ /* Статусные цвета — приглушённые пары (фон + текст) для pill-бейджей, точка-индикатор берёт --*-dot. Оттенки чуть теплее/спокойнее, чем чистые "светофорные" R/Y/G. */ --color-success-bg: rgba(48, 179, 120, 0.16); --color-success-text: #196b40; --color-success-dot: #30b378; --color-warning-bg: rgba(242, 169, 60, 0.20); --color-warning-text: #8a5a10; --color-warning-dot: #f2a93c; --color-danger-bg: rgba(240, 87, 75, 0.16); --color-danger-text: #a12e21; --color-danger-dot: #f0574b; --color-neutral-bg: rgba(110, 110, 115, 0.14); --color-neutral-text: #55555b; --color-neutral-dot: #8e8e93; /* -------------------------------------------------------------------- Радиусы -------------------------------------------------------------------- */ --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --radius-pill: 999px; /* -------------------------------------------------------------------- Тени — многослойные, мягкие (в духе Apple) -------------------------------------------------------------------- */ --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.03); --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.05); --shadow-3: 0 8px 16px rgba(0, 0, 0, 0.08), 0 24px 48px rgba(0, 0, 0, 0.12); /* -------------------------------------------------------------------- Типографика -------------------------------------------------------------------- */ --font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", system-ui, sans-serif; /* Inter — фолбэк через Google Fonts, подключается отдельно в base.html, этот файл шрифт не грузит. */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ /* -------------------------------------------------------------------- Отступы — единая шкала (кратно 4px, apple-style "воздух") -------------------------------------------------------------------- */ --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; /* -------------------------------------------------------------------- Breakpoints — CSS custom properties НЕ работают внутри @media условий, значения задокументированы здесь как справочник для авторов стилей: --bp-phone: 480px (мобильный телефон) --bp-tablet: 768px (планшет; переход card-view → table-view) --bp-desktop: 1024px (десктоп) --bp-wide: 1440px (широкий десктоп; max-width контентной области) Использовать в коде буквально: @media (max-width: 767px) { ... } -------------------------------------------------------------------- */ /* -------------------------------------------------------------------- Транзишены — единые тайминги для микроанимаций -------------------------------------------------------------------- */ --transition-fast: 150ms ease; --transition-base: 200ms ease; --transition-slow: 300ms cubic-bezier(0.2, 0.8, 0.2, 1); } /* ========================================================================== Тёмная тема — структура заложена, НЕ активируется автоматически. Включается атрибутом [data-theme="dark"] на или (переключатель ☀️/🌙 будет добавлен в следующих волнах). ========================================================================== */ [data-theme="dark"] { --color-bg: #1c1c1e; --color-bg-elevated: #2c2c2e; --bg-wash: radial-gradient(1100px circle at 12% -8%, rgba(255, 176, 105, 0.06), transparent 55%), radial-gradient(900px circle at 100% 8%, rgba(108, 116, 255, 0.10), transparent 50%); --color-surface: rgba(44, 44, 46, 0.72); --color-surface-solid: #2c2c2e; --color-surface-hover: rgba(58, 58, 60, 0.9); --color-text-primary: #f5f5f7; --color-text-secondary: #a1a1a6; --color-text-tertiary: #6e6e73; --color-border: #38383a; --color-border-strong: #48484a; --color-divider: rgba(255, 255, 255, 0.08); --color-accent: #6c74ff; --color-accent-hover: #838aff; --color-accent-active: #565eec; --color-accent-soft: rgba(108, 116, 255, 0.18); --shadow-accent: 0 6px 16px rgba(108, 116, 255, 0.35); --color-success-bg: rgba(48, 209, 88, 0.16); --color-success-text: #30d158; --color-success-dot: #30d158; --color-warning-bg: rgba(255, 159, 10, 0.18); --color-warning-text: #ff9f0a; --color-warning-dot: #ff9f0a; --color-danger-bg: rgba(255, 69, 58, 0.18); --color-danger-text: #ff453a; --color-danger-dot: #ff453a; --color-neutral-bg: rgba(161, 161, 166, 0.16); --color-neutral-text: #a1a1a6; --color-neutral-dot: #8e8e93; --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(0, 0, 0, 0.24); --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.32), 0 8px 24px rgba(0, 0, 0, 0.28); --shadow-3: 0 8px 16px rgba(0, 0, 0, 0.4), 0 24px 48px rgba(0, 0, 0, 0.5); }