/* Дизайн-токени редизайну 2026 (issue #20) — джерело істини: docs/design/redesign-2026/README.md, розділ "Design Tokens". Кожне пізніше issue (02-08) читає ЛИШЕ ці змінні, ніколи не хардкодить кольори/відступи напряму — саме це робить тему для слабозорих нижче перемиканням однієї атрибуту, а не окремим CSS-файлом поверх усього. */ :root { /* Кольори — синьо-білу схему (директорка ліцею, замінює помаранчево-зелений акцент початкового дизайн-брифу; див. примітку в docs/design/redesign-2026/README.md) звужено до одного акцентного відтінку синього замість --orange/--orange-light/--green. --accent — для інтерактивних станів (hover, CTA, активні пункти меню) на білому тлі; --accent-light — той самий акцент для тексту на темно-синьому тлі (footer), як раніше --orange-light. */ --blue: #123a78; --blue-900: #0e2f63; --blue-950: #0a2650; --accent: #1959a8; --accent-light: #9fc5f0; --ink: #16181a; --body: #43484c; --muted: #62676b; --paper: #ffffff; --paper-2: #fafaf9; --line: #ececea; --line-soft: #f0f0ee; --error: #b3261e; /* Відступи (крок 4) */ --space-1: 6px; --space-2: 8px; --space-3: 12px; --space-4: 14px; --space-5: 20px; --space-6: 22px; --space-7: 28px; --space-8: 44px; --space-9: 48px; --space-10: 56px; --space-11: 60px; /* Сітка */ --container: 1180px; --radius: 0; /* Типографічна шкала (розмір шрифту) */ --fs-h1: 60px; --fs-h2-section: 38px; --fs-h2-news: 34px; --fs-menu-index: 23px; --fs-tagline: 22px; --fs-card-title: 19px; --fs-text: 16.5px; --fs-button: 14.5px; --fs-nav: 14px; --fs-meta-lg: 12.5px; --fs-meta-sm: 11.5px; /* Line-height */ --lh-h1: 1.02; --lh-h2: 1.08; --lh-h3: 1.35; --lh-text: 1.7; /* Letter-spacing */ --ls-heading: -0.03em; --ls-h3: -0.02em; --ls-overline: 0.16em; --ls-filetype: 0.05em; /* Перехід (issue #21+ інтерактивні компоненти) */ --transition-fast: 150ms ease-out; --transition-base: 300ms ease-out; } /* Тема для слабозорих: перемикач (issue #21) ставить data-theme="low-vision" на , зчитуючи попередній вибір із localStorage до першого фарбування (щоб уникнути "спалаху" неправильної теми). Жодна властивість компонента не читає це значення напряму — усе відбувається через перевизначені токени вище. */ :root[data-theme='low-vision'] { --paper: #000000; --paper-2: #000000; --ink: #ffffff; --body: #ffffff; --muted: #ffffff; --blue: #ffdd00; --blue-900: #ffdd00; --blue-950: #ffdd00; /* --accent/--accent-light (issue #23's перейменування --orange/ --orange-light) — раніше тут лишались перевизначені старі, вже непрочитувані назви змінних, тож --accent просто не перевизначався взагалі: інтерактивний текст (tagline, чіпи, hover-стани) рендерився темно-синім на чорному тлі, значно нижче за поріг контрасту брифу. Знайдено issue #27's контраст-перевіркою. */ --accent: #ffdd00; --accent-light: #ffdd00; --line: #ffdd00; --line-soft: #ffdd00; /* --error (форма контактів) — #B3261E на #000 дає лише 3.21:1, нижче порогу брифу (4.5:1 для звичайного тексту). Тема для слабозорих навмисно тримається трьох кольорів (чорний/білий/жовтий, README.md), тож замість четвертого відтінку — той самий акцентний жовтий. Знайдено тим самим контраст-проходом issue #27. */ --error: #ffdd00; font-size: 20px; }