/* ============================================================ МРЄ · дизайн-токени Єдине джерело правди для кольору, типографіки, ритму й руху. Нижче за течією ніхто не пише HEX руками — тільки var(--…). Джерела: · brand-kit/figma-system.md — шкала типографіки, сітка 8px, радіуси · BRANDSTYLE.md — фірмові константи (логотип, бордовий, коричневий) · 01_Дослідження/R4-web-ux-a11y.md — зелена палітра розділу, перевірена на контраст WCAG і на дейтеранопію ============================================================ */ /* ---------- 1. ПРИМІТИВИ ----------------------------------- */ :root{ /* Фірмове ядро. Не змінюється між розділами. */ --c-bordo:#76232F; --c-bordo-700:#5C1B25; --c-brown:#5E4F47; --c-brown-600:#634E42; --c-beige:#DBC8B6; --c-gold-1:#E9DABC; --c-gold-2:#B09354; --c-gold-3:#8A552F; /* Синій — тема напряму «Допомога ЗСУ» (нинішній сайт). */ --c-blue:#148AFF; --c-blue-900:#083AA0; --c-blue-100:#D4ECFF; --c-blue-50:#ECF7FF; /* Зелений — тема напряму «Відновлення». Контраст ink на white = 10,7:1; base на white = 6,4:1. */ --c-green-900:#1F4029; --c-green-700:#2E5237; --c-green-600:#396345; --c-green-400:#5A8064; --c-green-200:#B3CCB6; --c-green-100:#DEEDDD; --c-green-50:#F0F7EF; /* Теплі нейтралі. Не сірі: зсунуті в бік бежевого ядра. */ --c-ink:#1C1C1C; --c-ink-soft:#2A2420; --c-mute:#6E625A; /* виправлено з #8A7E76 — той давав 3,9:1 */ --c-line:#E2DAD0; --c-line-soft:#EFE9E1; --c-surface:#FFFFFF; --c-surface-2:#FAF7F2; --c-surface-3:#F2EBE1; /* Семафор статусів. Окремо від акценту розділу. */ --c-ok:#1F4029; --c-ok-bg:#DEEDDD; --c-wait:#6B4A15; --c-wait-bg:#F5E9D2; --c-done:#5E4F47; --c-done-bg:#EEE9E2; } /* ---------- 2. СЕМАНТИКА ----------------------------------- */ /* За замовчуванням сайт синій. Розділ перемикається одним атрибутом на або на секції: data-theme="recovery". */ :root{ --bg:var(--c-surface); --bg-alt:var(--c-surface-2); --bg-deep:var(--c-surface-3); --fg:var(--c-ink); --fg-soft:var(--c-ink-soft); --fg-mute:var(--c-mute); --line:var(--c-line); --line-soft:var(--c-line-soft); --accent:var(--c-blue); --accent-strong:var(--c-blue-900); --accent-line:var(--c-blue); --accent-tint:var(--c-blue-100); --accent-wash:var(--c-blue-50); --accent-on-tint:var(--c-blue-900); /* Донат лишається бордовим на всьому сайті. */ --donate:var(--c-bordo); --donate-hover:var(--c-bordo-700); } [data-theme="recovery"]{ --accent:var(--c-green-600); --accent-strong:var(--c-green-900); --accent-line:var(--c-green-400); --accent-tint:var(--c-green-100); --accent-wash:var(--c-green-50); --accent-on-tint:var(--c-green-900); } /* Явна тема «Допомога ЗСУ». Дублює значення за замовчуванням, але дозволяє повернути синій усередині зеленої сторінки - наприклад, у бібліотеці блоків або в наскрізному блоці. */ [data-theme="army"]{ --accent:var(--c-blue); --accent-strong:var(--c-blue-900); --accent-line:var(--c-blue); --accent-tint:var(--c-blue-100); --accent-wash:var(--c-blue-50); --accent-on-tint:var(--c-blue-900); } /* Темні блоки. Використовуються точково: підвал, CTA-смуга, герой з фото. Токени перевизначаються локально, а не глобально — так секція лишається читабельною, куди б її не поставили. */ [data-surface="dark"]{ --bg:#14201A; --bg-alt:#1B2B22; --bg-deep:#0E1713; --fg:#F2EFE9; --fg-soft:#E6E0D6; --fg-mute:#A9B5AC; --line:#2C3F34; --line-soft:#223028; --accent-tint:rgba(222,237,221,.14); --accent-on-tint:#DEEDDD; --accent-line:#7FA189; } /* ---------- 3. ТИПОГРАФІКА --------------------------------- */ :root{ --f-head:"e-Ukraine Head","e-Ukraine",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --f-body:"e-Ukraine",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --f-mono:ui-monospace,"Cascadia Mono",Consolas,"SF Mono",Menlo,monospace; /* Шкала з Figma, переведена у fluid. Верхня межа = макет 1920, нижня — мобільний. Крок ≈ 1.25. */ --t-display:clamp(2.75rem,1.6rem + 5.1vw,6rem); /* 44 → 96 */ --t-h1:clamp(2.25rem,1.5rem + 3.3vw,4rem); /* 36 → 64 */ --t-h2:clamp(1.75rem,1.25rem + 2.2vw,3rem); /* 28 → 48 */ --t-h3:clamp(1.375rem,1.1rem + 1.2vw,2rem); /* 22 → 32 */ --t-h4:clamp(1.125rem,1rem + .55vw,1.5rem); /* 18 → 24 */ --t-h5:1.25rem; /* 20 */ --t-lead:clamp(1.0625rem,1rem + .35vw,1.25rem); /* 17 → 20 */ --t-body:1rem; /* 16 */ --t-sm:.875rem; /* 14 */ --t-xs:.75rem; /* 12 */ --lh-tight:1.06; --lh-head:1.16; --lh-body:1.6; --ls-display:-.03em; --ls-head:-.02em; --ls-label:.14em; --w-light:300; --w-regular:400; --w-medium:500; --w-bold:700; /* Ширина рядка. Довший за 72 символи текст читається гірше. */ --measure:66ch; --measure-narrow:52ch; } /* ---------- 4. РИТМ І ГЕОМЕТРІЯ ---------------------------- */ :root{ --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.5rem; --s-6:2rem; --s-7:2.5rem; --s-8:3rem; --s-9:4rem; --s-10:5rem; --s-11:6rem; --s-12:8rem; /* Вертикальний ритм секцій — теж fluid. */ --section-y:clamp(3.5rem,2rem + 6vw,7rem); --section-y-tight:clamp(2.5rem,1.5rem + 4vw,4.5rem); --r-sm:4px; --r-md:8px; --r-lg:12px; --r-pill:999px; --w-container:1240px; --w-narrow:820px; --gutter:clamp(1rem,.5rem + 2.4vw,2.5rem); --btn-h:44px; /* Тіні теплі — з домішкою коричневого, а не чорні. */ --sh-1:0 1px 2px rgba(94,79,71,.07); --sh-2:0 4px 14px -6px rgba(42,36,32,.16); --sh-3:0 24px 48px -32px rgba(42,36,32,.42); --ring:0 0 0 3px color-mix(in srgb,var(--accent) 32%,transparent); } /* ---------- 5. РУХ ----------------------------------------- */ :root{ --dur-1:120ms; --dur-2:220ms; --dur-3:420ms; --dur-4:900ms; --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1); } @media (prefers-reduced-motion:reduce){ :root{--dur-1:0ms;--dur-2:0ms;--dur-3:0ms;--dur-4:0ms} }