/* ============================================================= Monochrome UI — Design Tokens Чёрно-белый минимализм, извлечённый из iOS-приложения N13 Balance. Только нейтральное ядро: чёрный, белый, серые, стекло, hairline. Никакой доменной палитры — один опциональный акцент (по умолч. белый). Подключение: Светлая тема: Свой акцент: --accent можно переопределить одним цветом при желании ============================================================= */ :root { color-scheme: dark; /* ---------- Шрифты ---------- */ /* Системный SF Pro; округлённый вариант — для крупных цифр/заголовков */ --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", system-ui, sans-serif; --font-rounded: "SF Pro Rounded", ui-rounded, "Nunito", "Varela Round", var(--font-sans); /* Размеры (pt из SwiftUI → px 1:1) */ --text-display-xl: 60px; /* крупная цифра / hero */ --text-display: 40px; --text-display-sm: 30px; --text-title: 28px; --text-title2: 22px; --text-title3: 20px; --text-headline: 17px; --text-body: 17px; --text-callout: 16px; --text-subheadline: 15px; --text-footnote: 13px; --text-caption: 12px; --text-caption2: 11px; --text-micro: 9px; /* Насыщенность */ --weight-regular: 400; --weight-semibold: 600; --weight-bold: 700; --weight-heavy: 800; --tracking-wide: 0.05em; /* разрядка для капслока (SwiftUI tracking) */ --leading-tight: 1.1; --leading-normal: 1.3; /* ---------- Нейтральная шкала ---------- */ --black: #000000; --ink: #1C1C1E; /* «почти чёрный» — текст на светлом фоне */ --gray: #8E8E93; /* системный серый — вторичный текст */ --white: #FFFFFF; /* ---------- Тёмная тема (база) ---------- */ --bg: #000000; --bg-elevated: #1C1C1E; --text-primary: #FFFFFF; --text-secondary: rgba(235, 235, 245, 0.60); --text-tertiary: rgba(235, 235, 245, 0.30); --text-muted: #8E8E93; /* Поверхности — полупрозрачное «стекло» поверх фона. Именно прозрачность (а не сплошной серый) даёт глубину и живёт в обеих темах. */ --surface: rgba(255, 255, 255, 0.05); --surface-elevated: rgba(255, 255, 255, 0.06); --surface-hover: rgba(255, 255, 255, 0.08); --surface-selected: rgba(255, 255, 255, 0.10); /* Границы (hairline) */ --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.10); --border-selected: rgba(255, 255, 255, 0.20); /* Скелетон-загрузка */ --skeleton-base: rgba(255, 255, 255, 0.08); --skeleton-shine: rgba(255, 255, 255, 0.15); /* ---------- Акцент ---------- В монохромной системе акцент = основной цвет (белый на тёмном). Если сайту нужен ОДИН фирменный цвет — переопредели только эту переменную. */ --accent: var(--text-primary); --on-accent: var(--bg); /* ---------- Скругления ---------- */ --radius-xs: 6px; --radius-sm: 8px; --radius-md: 14px; /* строки списка */ --radius-lg: 16px; /* компактные карточки */ --radius-xl: 20px; --radius-2xl: 24px; /* основные карточки — фирменный радиус */ --radius-pill: 999px; --radius-full: 50%; /* ---------- Толщина границ ---------- */ --hairline: 1px; /* iOS 0.5–0.7pt → 1px на вебе */ --border-w-selected: 1.5px; --border-w-card: 2px; /* ---------- Отступы · сетка 4px ---------- */ --space-2xs: 2px; --space-xs: 4px; --space-sm: 6px; --space-2: 8px; --space-3: 10px; --space-4: 12px; --space-5: 14px; --space-6: 16px; /* базовый внутренний отступ карточки */ --space-7: 18px; --space-8: 20px; --space-10: 24px; /* горизонтальные поля экрана */ --space-16: 40px; /* ---------- Тени ---------- Стиль плоский: объём держат hairline-границы, не тени. */ --shadow-none: none; --shadow-chip: 0 2px 6px rgba(0, 0, 0, 0.15); --shadow-card: 0 10px 20px rgba(0, 0, 0, 0.5); --shadow-text: 0 1px 4px rgba(0, 0, 0, 0.4); /* ---------- Движение ---------- Пружины SwiftUI → длительность + easing (близко на глаз). */ --dur-fast: 200ms; /* нажатие */ --dur-base: 300ms; /* смена контента */ --dur-slow: 400ms; /* easeInOut */ --dur-appear: 480ms; /* появление */ --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1); /* easeInOut */ --ease-spring: cubic-bezier(0.22, 1, 0.36, 1); /* плавный spring */ --ease-spring-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* spring с отскоком */ --press-scale: 0.96; /* масштаб при нажатии */ /* ---------- Фирменный световой луч сверху ---------- */ --light-ray: linear-gradient(to bottom, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.06) 25%, transparent 55%); } /* ============================================================= Светлая тема — вторая половина «чёрно-белого»: чёрное на белом. ============================================================= */ :root[data-theme="light"], :root.light { color-scheme: light; --bg: #F2F2F7; --bg-elevated: #FFFFFF; --text-primary: #1C1C1E; --text-secondary: rgba(60, 60, 67, 0.60); --text-tertiary: rgba(60, 60, 67, 0.30); --text-muted: #8E8E93; --surface: rgba(0, 0, 0, 0.04); --surface-elevated: rgba(0, 0, 0, 0.04); --surface-hover: rgba(0, 0, 0, 0.06); --surface-selected: rgba(0, 0, 0, 0.07); --border: rgba(0, 0, 0, 0.07); --border-strong: rgba(0, 0, 0, 0.08); --border-selected: rgba(0, 0, 0, 0.14); --skeleton-base: rgba(0, 0, 0, 0.06); --skeleton-shine: rgba(0, 0, 0, 0.10); --shadow-card: 0 4px 10px rgba(0, 0, 0, 0.18); --light-ray: none; } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; --dur-appear: 1ms; } }