/* ══════════════════════════════════════════════════════════════════════════ DESIGN TOKENS — zodiacdaily.net Перенесено з «UI-UX ТЗ v1.0 — Premium Design System», числами з документа, без інтерпретації. §88 вимагає, щоб frontend використовував ті самі токени, що й Figma, тому це єдине джерело правди для кольору, типографіки, відступів, радіусів і руху. §105 забороняє змінювати color system, typography, radius і spacing без погодження. Отже правити цей файл — означає правити ТЗ, а не «підкрутити стилі». Усе інше в проєкті мусить посилатися на ці змінні й не містити жодного власного hex-коду. Посилання на розділи ТЗ лишені в коментарях навмисно: інакше через місяць неможливо перевірити, чи число взято з документа, чи з голови. ══════════════════════════════════════════════════════════════════════════ */ :root { /* ── Кольори, dark mode — основний режим (§12, §15) ──────────────────── */ /* Pure black заборонений (§15), тому найтемніше значення — #0E1117. */ --bg: #0E1117; /* Deep Midnight */ --bg-2: #151923; /* Secondary background */ --surface: #1B202B; /* Surface */ --surface-up: #222836; /* Elevated Surface */ --text: #F4F2ED; /* Primary text */ --text-2: #A6ACB8; /* Secondary text */ --text-muted: #747B89; /* Muted text */ --border: #2B3140; --accent: #C9A86A; /* Muted Champagne */ /* Текст поверх акценту. У ТЗ окремо не названий, але потрібен: білий на шампані дає контраст ~2.1:1 і провалює WCAG (§60), тому беремо дуже темний теплий, похідний від акценту. Контраст із #C9A86A ≈ 9.5:1. */ --on-accent: #17130A; --accent-2: #9C8BCE; /* Soft Lavender */ --success: #6FA889; --warning: #C89B58; --error: #B96B72; /* ── Типографіка (§16) ──────────────────────────────────────────────── */ /* Serif = personality, sans-serif = usability. Зараз у стеку лише системні шрифти: Cormorant Garamond і Inter ще не підключені, бо це або третє з'єднання до чужого CDN, або завантаження файлів — обидва варіанти потребують рішення, а не самочинства. Коли шрифти з'являться, достатньо дописати їх першими в цей рядок, і вони підхопляться всюди. */ --font-serif: Georgia, "Times New Roman", "Cormorant Garamond", serif; --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Type scale, desktop (§17) */ --fs-display: 60px; /* 56–64 */ --fs-h1: 48px; /* 44–52 */ --fs-h2: 36px; /* 32–40 */ --fs-h3: 26px; /* 24–28 */ --fs-h4: 21px; /* 20–22 */ --fs-body-lg: 18px; --fs-body: 16px; --fs-body-sm: 14px; --fs-caption: 12px; /* Line height (§19) */ --lh-heading: 1.15; /* 1.1–1.2 */ --lh-body: 1.62; /* 1.55–1.7 */ --lh-ui: 1.35; /* 1.3–1.4 */ /* ── Відступи (§9) ──────────────────────────────────────────────────── */ /* Шкала фіксована. «Не використовувати випадкові margins» — тому в коді не повинно бути жодного px поза цими значеннями. */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; --s-30: 120px; /* Відступи між секціями (§9): desktop 64–96, mobile 40–64 */ --section-y: var(--s-20); --section-y-sm: var(--s-12); /* ── Сітка й контейнер (§7, §8) ─────────────────────────────────────── */ --container: 1280px; --gutter: 24px; /* 20–24 */ --page-x: 24px; /* 24–32 */ /* Основна текстова колонка 650–760px (§8). Для статей full-width тексту не використовувати. */ --measure: 720px; --rail: 320px; /* right rail горизонта (§32) */ /* ── Радіуси (§10) ──────────────────────────────────────────────────── */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-card: 20px; /* feature card */ --r-hero: 24px; /* hero / large module */ --r-pill: 999px; /* ── Тіні (§11) ─────────────────────────────────────────────────────── */ /* Дуже стримані: низька прозорість, великий блюр, без важкого чорного навколо кожної картки. */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, .18); --shadow: 0 8px 24px rgba(0, 0, 0, .22); --shadow-lg: 0 20px 48px rgba(0, 0, 0, .28); /* ── Рух (§54) ──────────────────────────────────────────────────────── */ --t-base: 180ms; /* 150–250 */ --t-complex: 380ms; /* 300–500 */ --t-flip: 500ms; /* 400–600, переворот карти */ --ease: cubic-bezier(.4, 0, .2, 1); /* ── Хедер і навігація (§20, §23, §24) ──────────────────────────────── */ --header-h: 80px; --header-h-sm: 68px; /* 64–72 */ --bottomnav-h: 72px; /* 68–76 */ color-scheme: dark; } /* ── Light mode (§14) ─────────────────────────────────────────────────────── Допускається, але не основний. Має виглядати як premium editorial publication, тому фон тепло-бежевий, а не білий. Перемикається атрибутом на , а не лише медіазапитом: інакше відвідувач не може обрати, а §14 робить цей режим саме опційним. */ :root[data-theme="light"] { --bg: #F7F5F0; --bg-2: #FFFFFF; --surface: #FFFFFF; --surface-up: #FFFFFF; --text: #171A20; --text-2: #666D78; --text-muted: #8A909A; --border: #E5E2DB; --accent: #8E7342; --on-accent: #FFFFFF; /* контраст із #8E7342 ≈ 5.6:1 */ --shadow-sm: 0 1px 2px rgba(23, 26, 32, .06); --shadow: 0 8px 24px rgba(23, 26, 32, .08); --shadow-lg: 0 20px 48px rgba(23, 26, 32, .10); color-scheme: light; } /* ── Адмінка: власна палітра (§83) ────────────────────────────────────────── §62 прямо каже, що адмінка — не продовження сайту, а operations dashboard, і §83 дає їй окремі, темніші значення. Тому не перевикористовуємо кольори сайту, а визначаємо свої на тому самому контракті імен. */ :root[data-surface="admin"] { --bg: #0B0E13; --bg-2: #10141B; /* sidebar */ --surface: #151A22; --surface-up: #1B212B; --text: #F2F3F5; --text-2: #A6ACB8; --text-muted: #747B89; --border: #242B36; /* Статуси в адмінці — приглушені, без неонових бейджів (§82) */ --success: #6FA889; --warning: #C89B58; --error: #B96B72; --info: #9C8BCE; /* Розміри каркаса (§63, §65, §66, §78) */ --sidebar-w: 256px; /* 248–264 */ --sidebar-w-collapsed: 72px; --topbar-h: 64px; --row-h: 52px; /* 48–56 */ --row-head-h: 42px; /* 40–44 */ color-scheme: dark; } /* Хто просив менше руху — отримує менше руху (§60: reduced motion). */ @media (prefers-reduced-motion: reduce) { :root { --t-base: 0ms; --t-complex: 0ms; --t-flip: 0ms; } }