/* ═══════════════════════════════════════════════════════════════════════════ GOODWOODHOME — DESIGN TOKENS Єдине джерело правди для кольору, типографіки, ритму й руху бренду. НАВІЩО ЦЕЙ ФАЙЛ =============== До нього палітра жила у двох місцях (site.css і landing-base.css) і була зібрана «на око» — золото #C9A84C і майже чорний #0E0D0B не походили з логотипа. Коли з'явився офіційний знак (assets/images/brand/), стало видно розбіжність: фірмове золото темніше й глухіше, а фірмовий темний — не чорний, а глибокий зелений. Цей файл фіксує значення, ЗНЯТІ ПРЯМО З ФАЙЛІВ ЛОГОТИПА, щоб сайт і знак нарешті звучали в один голос. ЯК ЦЕ ВЛАШТОВАНО — ДВА ЯРУСИ ============================ Ярус 1. ПРИМІТИВИ (--gwh-green-900, --gwh-gold-600, …) Сира палітра. У компонентах їх НЕ використовують напряму — інакше «зроби фон світлішим» знову перетвориться на пошук по всьому CSS. Ярус 2. СЕМАНТИКА (--gwh-surface, --gwh-text, --gwh-accent, …) Ролі, а не кольори. Компонент каже «текст», а не «#13251A». Ключове рішення: семантика НЕ глобальна. Сайт чергує темні й світлі секції, тому один глобальний набір змінних тут не працює — кнопка на темній секції і та сама кнопка на світлій потребують різних значень. Замість цього семантику перевизначає КОНТЕКСТ ПОВЕРХНІ (.gwh-surface--forest / --ivory / --sand / --night). Компонент читає лише семантику й тому автоматично правильний на будь-якому фоні. Див. блок «ПОВЕРХНІ» нижче. ІМЕНУВАННЯ ========== Усі токени мають префікс --gwh-. Це навмисно: старі --gold / --dark / --text із site.css лишаються недоторканими, тому підключення цього файла НІЧОГО не змінює візуально. Перехід на нову систему — покомпонентний і зворотний. ПІДКЛЮЧЕННЯ =========== ← ПЕРШИМ ← компоненти ← чинні стилі Живий довідник із усіма токенами й компонентами: /brand/ ═══════════════════════════════════════════════════════════════════════════ */ /* ─────────────────────────────────────────────────────────────────────────── ЯРУС 1 · ПРИМІТИВИ ─────────────────────────────────────────────────────────────────────────── */ :root{ /* ── ЗЕЛЕНИЙ ────────────────────────────────────────────────────────────── Головний колір бренду. --gwh-green-900 (#13251A) знято піпеткою з контуру арки в logo-full.png — це буквально колір знака, а не підібраний відповідник. Це не чорний і не «темно-сірий»: у ньому є хвоя, і саме вона відрізняє GoodWoodHome від типового темного сайту забудовника. */ --gwh-green-950:#0B1710; /* найглибший — підкладка під героєм, футер */ --gwh-green-900:#13251A; /* ★ КОЛІР ЛОГОТИПА — основна темна поверхня */ --gwh-green-800:#1B3324; /* картка / піднята поверхня на темному */ --gwh-green-700:#25422F; /* межі та hover-поверхні на темному */ --gwh-green-600:#3A5C46; /* текст-акцент на світлому (7.1:1 на ivory-50) */ --gwh-green-500:#4F7A5C; /* «живий» зелений: успіх, індикатори */ --gwh-green-300:#8FB49B; /* світлий зелений на темному (7.0:1) */ /* ── ЗОЛОТО ─────────────────────────────────────────────────────────────── --gwh-gold-600 (#8A7539) — золото зі знака. Воно навмисно приглушене, латунно-оливкове, а не яскраво-жовте: у логотипі це тонка лінія арки й слово WOOD, тобто акцент, а не заливка. ВАЖЛИВО ПРО КОНТРАСТ. Саме фірмове золото має 3.85:1 на ivory і 3.58:1 на green-900 — цього вистачає для ліній, іконок і великих заголовків, але НЕ для основного тексту. Тому ramp має два робочі кінці: на світлому фоні текст бере gold-700, на темному — gold-400. Це не «інше золото», а те саме, зсунуте рівно настільки, щоб його можна було прочитати. */ --gwh-gold-800:#54461F; /* натиснутий стан на світлому */ --gwh-gold-700:#6E5C2B; /* золотий ТЕКСТ на світлому фоні (5.6:1) */ --gwh-gold-600:#8A7539; /* ★ ЗОЛОТО ЛОГОТИПА — заливки, лінії, великий текст */ --gwh-gold-500:#A68F49; /* hover заливки; текст на темному (5.1:1) */ --gwh-gold-400:#C0A961; /* золотий ТЕКСТ на темному фоні (7.0:1) */ --gwh-gold-300:#D9C68F; /* делікатний акцент на темному (9.5:1) */ /* ── СЛОНОВА КІСТЬ І ПІСОК ──────────────────────────────────────────────── --gwh-ivory-100 (#F3EDE3) — фон із logo-full-light.png. Це не білий: тепла паперова основа, на якій знак і задумувався. Чистий #FFF у системі навмисно відсутній — він одразу дає «tech/SaaS», якого ми уникаємо. */ --gwh-ivory-50:#FBF8F2; /* найсвітліше — картка на ivory-фоні */ --gwh-ivory-100:#F3EDE3; /* ★ ФОН ЛОГОТИПА — основна світла поверхня */ --gwh-ivory-200:#EAE2D4; /* друга світла поверхня, чергування секцій */ --gwh-ivory-300:#DCD2C0; /* межі та роздільники на світлому */ --gwh-sand-400:#C4B9A3; /* приглушений текст на ТЕМНОМУ (8.3:1) */ --gwh-sand-500:#9C907A; /* лише декор: іконки, лінії — для тексту замало */ --gwh-sand-600:#6F6555; /* приглушений текст на СВІТЛОМУ (4.9:1) */ --gwh-sand-700:#574E40; /* вторинний текст на світлому (7.0:1) */ /* ── СЛУЖБОВІ СТАНИ ─────────────────────────────────────────────────────── Навмисно НЕ системні синій/червоний/жовтий — вони миттєво ламають природну гаму. Успіх росте із зеленого бренду, помилка — з теракоти (палена глина, матеріал із тієї ж природної родини), увага — з бурштину. */ --gwh-success-600:#3A5C46; --gwh-success-400:#8FB49B; --gwh-danger-600:#8C4A2F; /* теракота: 5.8:1 на ivory */ --gwh-danger-400:#C8815F; /* теракота на темному: 5.2:1 */ --gwh-warning-600:#7A5A1E; /* бурштин: 5.5:1 на ivory */ --gwh-warning-400:#D9B25F; /* ── ПРОЗОРІ ЗАЛИВКИ ────────────────────────────────────────────────────── Для накладок на фото й скло-ефектів. rgba, а не hex, бо під ними — знімки. */ --gwh-alpha-ink-04:rgba(19,37,26,0.04); --gwh-alpha-ink-08:rgba(19,37,26,0.08); --gwh-alpha-ink-12:rgba(19,37,26,0.12); --gwh-alpha-ink-60:rgba(19,37,26,0.60); --gwh-alpha-ink-88:rgba(11,23,16,0.88); --gwh-alpha-light-08:rgba(243,237,227,0.08); --gwh-alpha-light-16:rgba(243,237,227,0.16); --gwh-alpha-light-32:rgba(243,237,227,0.32); --gwh-alpha-gold-16:rgba(138,117,57,0.16); --gwh-alpha-gold-32:rgba(138,117,57,0.32); /* ── ШРИФТИ ─────────────────────────────────────────────────────────────── Три голоси, кожен із чіткою роботою. BRAND — голос самого логотипа. Напис GOODWOODHOME — геометричний гротеск із широким трекінгом, і саме цей прийом (великі літери + розрідження) повторюють надзаголовки, кнопки й підписи. У стеку першим стоїть Jost — найближчий безкоштовний відповідник до накреслення знака. Він НЕ завантажується сайтом: якщо його немає, стек тихо падає на Inter, і все працює. Захочемо точного збігу з логотипом — досить додати один , нічого в CSS не змінюючи. DISPLAY — Cormorant Garamond. Уже стоїть на сайті. Дає теплоту й архітектурну статність, яких геометричний гротеск не дає; тримає нас подалі від холодного tech. BODY — Inter. Робоча конячка: інтерфейс, таблиці, довгі тексти. */ --gwh-font-display:'Cormorant Garamond',Georgia,serif; --gwh-font-brand:'Jost','Inter',-apple-system,BlinkMacSystemFont,sans-serif; --gwh-font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --gwh-font-mono:ui-monospace,SFMono-Regular,Menlo,monospace; /* ── РОЗМІРИ ШРИФТУ ─────────────────────────────────────────────────────── Плинна шкала: жодних медіа-запитів на типографіку. clamp() зав'язаний на vw, тому заголовок дихає разом із шириною екрана. Нижня межа кожного clamp — це реальний мобільний розмір, а не «щоб влізло». */ --gwh-text-hero:clamp(42px,7vw,88px); /* герой, один на сторінку */ --gwh-text-display:clamp(34px,5vw,60px); /* заголовок великого блоку */ --gwh-text-h2:clamp(28px,3.6vw,44px); /* заголовок секції */ --gwh-text-h3:clamp(22px,2.4vw,30px); /* підрозділ, заголовок картки */ --gwh-text-h4:20px; /* дрібний заголовок */ --gwh-text-lead:18px; /* абзац-вступ під заголовком */ --gwh-text-body:16px; /* основний текст */ --gwh-text-sm:14px; /* кнопки, компактний інтерфейс */ --gwh-text-xs:13px; /* підписи, метадані */ --gwh-text-2xs:11px; /* надзаголовок, бейдж (ЛИШЕ CAPS) */ /* ── ІНТЕРЛІНЬЯЖ ── */ --gwh-leading-tight:1.05; /* герой і display: великий кегль хоче тісноти */ --gwh-leading-snug:1.2; /* заголовки секцій */ --gwh-leading-normal:1.5; /* короткі абзаци, інтерфейс */ --gwh-leading-relaxed:1.65; /* довге читання */ /* ── ТРЕКІНГ ────────────────────────────────────────────────────────────── Головний типографічний прийом бренду. У логотипі напис розріджений дуже сильно, і саме це читається як «дорого й спокійно». Правило просте: чим ДРІБНІШИЙ текст і чим ближче він до ролі підпису — тим ШИРШЕ трекінг; великі заголовки, навпаки, стискаються. */ --gwh-tracking-tighter:-0.02em; /* hero */ --gwh-tracking-tight:-0.01em; /* display / h2 */ --gwh-tracking-normal:0; /* основний текст */ --gwh-tracking-wide:0.06em; /* кнопки */ --gwh-tracking-wider:0.14em; /* підписи, метадані */ --gwh-tracking-brand:0.22em; /* ★ надзаголовки — трекінг як у логотипі */ /* ── НАСИЧЕНІСТЬ ────────────────────────────────────────────────────────── Жирніше за 600 система не піднімається: жирний текст читається як розпродаж, а не як премія. Акцент ставимо кольором і повітрям. */ --gwh-weight-light:300; --gwh-weight-regular:400; --gwh-weight-medium:500; --gwh-weight-semibold:600; /* ── РИТМ ───────────────────────────────────────────────────────────────── База 4px — під неї вже лягає більшість чинних відступів сайту. */ --gwh-space-1:4px; --gwh-space-2:8px; --gwh-space-3:12px; --gwh-space-4:16px; --gwh-space-5:24px; --gwh-space-6:32px; --gwh-space-7:48px; --gwh-space-8:64px; --gwh-space-9:96px; --gwh-space-10:128px; /* Вертикальний крок секцій. Повітря — головний носій відчуття «дорого», тому воно теж плинне: на мобільному 64px, на десктопі до 128px. */ --gwh-section-y:clamp(64px,9vw,128px); --gwh-section-y-sm:clamp(48px,6vw,80px); --gwh-gutter:clamp(20px,6vw,96px); /* бічні поля секції */ --gwh-container:1240px; /* межа читабельності контенту */ --gwh-container-narrow:760px; /* довгий текст: ~75 знаків у рядку */ /* ── СКРУГЛЕННЯ ─────────────────────────────────────────────────────────── Майже прямий кут — свідома позиція. Архітектура знака побудована на чистій лінії й вістрі арки; скруглення 12–16px негайно перетворює сайт на звичайний продуктовий шаблон. Стеля системи — 4px. */ --gwh-radius-none:0; --gwh-radius-sm:2px; /* кнопки, поля вводу, бейджі */ --gwh-radius-md:3px; /* картки, зображення */ --gwh-radius-lg:4px; /* великі медіаблоки — максимум системи */ --gwh-radius-pill:999px;/* виняток: лише чипи-фільтри */ /* ── ОБВІДКА-АРКА (власник, 2026-08-20) ── Кнопки-налаштування в шапці (слухавка, мова, тема) були в кружках. Коло не каже нічого про те, чий це сайт; стрільчаста арка — це буквально переріз наших будинків, той самий силует, що в знаку бренду. Це МАСКА, а не картинка: контур намальовано штрихом, а колір дає background-color:currentColor елемента під нею. Тому обвідка сама тьмяніє й золотіє разом зі станом кнопки, і працює в обох темах — чого не дала б готова картинка з зашитим кольором. Border-radius тут безсилий: він дає купол, а в нас вістря. ГЕОМЕТРІЯ — З КРЕСЛЕННЯ, А НЕ НА ОКО. Перша версія малювалась двома квадратичними кривими з підібраними контрольними точками; форма виходила схожа, але не наша. Тут ті самі числа, що на схемі перерізу: ширина 277 см, висота 289,26 см; борти ПРЯМОВИСНІ до 90 см; далі два кругові сегменти R 212,5 см із центрами на рівні 90 см, рознесеними на 212,25 см від протилежного борту; сходяться у вістрі на осі (138,5 см від краю). Перевірка сходиться: sqrt(212.5² − (212.25 − 138.5)²) + 90 = 289,3. Вістря тупувате (кут ≈139°) — саме таке воно й на кресленні, це не помилка: наша арка стрільчаста, але не голкоподібна. Одиниці viewBox — сантиметри плюс поле 6 під штрих (половина товщини ≈5). */ --gwh-arch-frame:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 289 301'%3E%3Cpath d='M6 295.3 V205.3 A212.5 212.5 0 0 1 144.5 6 A212.5 212.5 0 0 1 283 205.3 V295.3 Z' fill='none' stroke='%23fff' stroke-width='10' stroke-linejoin='round'/%3E%3C/svg%3E"); /* Та сама арка, але залита — підкладка під іконкою (власник, 2026-08-20). Шапка лежить на фотографіях, і дрібні знаки на них губилися: прапорець мови 9×6 із темною обвідкою читався просто як темний квадратик. Тепер під іконкою стоїть темна плашка у формі арки, і знак має сталий фон незалежно від того, що під шапкою — ліс, стіна цеху чи однотонна секція. */ --gwh-arch-solid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 289 301'%3E%3Cpath d='M6 295.3 V205.3 A212.5 212.5 0 0 1 144.5 6 A212.5 212.5 0 0 1 283 205.3 V295.3 Z' fill='%23fff'/%3E%3C/svg%3E"); /* ── МЕЖІ ── */ --gwh-border-hairline:1px; --gwh-border-thick:2px; --gwh-rule-accent:2px; /* коротка золота риска під надзаголовком */ /* ── ТІНІ ───────────────────────────────────────────────────────────────── Тіні тоновані зеленим, а не сірим. Нейтральна сіра тінь на теплому паперовому фоні виглядає брудною плямою; зелена читається як природна. */ --gwh-shadow-xs:0 1px 2px rgba(19,37,26,0.06); --gwh-shadow-sm:0 2px 8px rgba(19,37,26,0.07); --gwh-shadow-md:0 8px 24px rgba(19,37,26,0.10); --gwh-shadow-lg:0 20px 48px rgba(19,37,26,0.14); --gwh-shadow-inset:inset 0 1px 0 rgba(243,237,227,0.06); /* ── РУХ ────────────────────────────────────────────────────────────────── Спокійно й без пружин. Bounce/overshoot читаються як «весело», а нам потрібне «впевнено». Тому лише ease-out. */ --gwh-ease:cubic-bezier(0.22,0.61,0.36,1); --gwh-ease-out:cubic-bezier(0.16,1,0.3,1); --gwh-duration-fast:160ms; /* колір, прозорість */ --gwh-duration-base:240ms; /* hover-стани */ --gwh-duration-slow:420ms; /* розкриття панелей */ --gwh-duration-reveal:700ms; /* поява при прокрутці */ /* ── ШАРИ ───────────────────────────────────────────────────────────────── Зафіксовані рівні замість випадкових z-index:9999 по файлах. */ --gwh-z-base:1; --gwh-z-sticky:80; --gwh-z-float:90; /* плаваючий CTA, кнопка «вгору» */ --gwh-z-nav:100; --gwh-z-overlay:200; --gwh-z-modal:300; /* ── ЛОГОТИП ────────────────────────────────────────────────────────────── Охоронне поле — не число в пікселях, а ЧАСТКА висоти знака: інакше на великому екрані логотип знову притиснеться до сусіднього елемента. 0.5 = навколо знака вільно рівно пів його висоти. */ --gwh-logo-clearspace:0.5; --gwh-logo-min-full:120px; /* менше — «NATURE CABINS» перестає читатись */ --gwh-logo-min-mark:24px; /* менше — зникають вікно й ялина всередині арки */ } /* ═══════════════════════════════════════════════════════════════════════════ ЯРУС 2 · ПОВЕРХНІ Тут семантика отримує значення. Вішаємо клас на
— і все всередині (текст, межі, кнопки, поля) стає правильним само собою.
…
Чотири поверхні. Більше не потрібно: чергування «темна → світла → темна» і є ритмом сторінки. ═══════════════════════════════════════════════════════════════════════════ */ .gwh-surface{ background:var(--gwh-surface-bg); color:var(--gwh-text); } /* ── FOREST · основна темна ──────────────────────────────────────────────── Колір самого логотипа. Герой, футер, акцентні блоки. */ .gwh-surface--forest{ --gwh-surface-bg:var(--gwh-green-900); --gwh-surface-raised:var(--gwh-green-800); --gwh-surface-sunken:var(--gwh-green-950); --gwh-text:var(--gwh-ivory-100); --gwh-text-secondary:var(--gwh-sand-400); --gwh-text-muted:rgba(243,237,227,0.55); --gwh-text-inverse:var(--gwh-green-900); --gwh-accent:var(--gwh-gold-400); /* золото, читабельне на темному */ --gwh-accent-strong:var(--gwh-gold-300); --gwh-accent-fill:var(--gwh-gold-600); /* заливка кнопки — золото логотипа */ --gwh-accent-fill-hover:var(--gwh-gold-500); --gwh-on-accent:var(--gwh-green-950); /* текст ПО золоту (7.9:1) */ --gwh-border:var(--gwh-alpha-light-16); --gwh-border-strong:var(--gwh-alpha-light-32); --gwh-border-accent:var(--gwh-alpha-gold-32); --gwh-field-bg:rgba(11,23,16,0.55); --gwh-focus-ring:var(--gwh-gold-400); --gwh-success:var(--gwh-success-400); --gwh-danger:var(--gwh-danger-400); --gwh-warning:var(--gwh-warning-400); --gwh-shadow:none; /* на темному тінь не видно — не платимо*/ } /* ── NIGHT · найглибша ───────────────────────────────────────────────────── Під фото й відео: знімок читається краще, коли підкладка темніша за нього. */ .gwh-surface--night{ --gwh-surface-bg:var(--gwh-green-950); --gwh-surface-raised:var(--gwh-green-900); --gwh-surface-sunken:#060F0A; --gwh-text:var(--gwh-ivory-100); --gwh-text-secondary:var(--gwh-sand-400); --gwh-text-muted:rgba(243,237,227,0.5); --gwh-text-inverse:var(--gwh-green-950); --gwh-accent:var(--gwh-gold-400); --gwh-accent-strong:var(--gwh-gold-300); --gwh-accent-fill:var(--gwh-gold-600); --gwh-accent-fill-hover:var(--gwh-gold-500); --gwh-on-accent:var(--gwh-green-950); --gwh-border:var(--gwh-alpha-light-08); --gwh-border-strong:var(--gwh-alpha-light-16); --gwh-border-accent:var(--gwh-alpha-gold-32); --gwh-field-bg:rgba(243,237,227,0.05); --gwh-focus-ring:var(--gwh-gold-400); --gwh-success:var(--gwh-success-400); --gwh-danger:var(--gwh-danger-400); --gwh-warning:var(--gwh-warning-400); --gwh-shadow:none; } /* ── IVORY · основна світла ──────────────────────────────────────────────── Фон, на якому намальований сам знак. Довгі тексти, специфікації, форми. */ .gwh-surface--ivory{ --gwh-surface-bg:var(--gwh-ivory-100); --gwh-surface-raised:var(--gwh-ivory-50); --gwh-surface-sunken:var(--gwh-ivory-200); --gwh-text:var(--gwh-green-900); --gwh-text-secondary:var(--gwh-sand-700); --gwh-text-muted:var(--gwh-sand-600); --gwh-text-inverse:var(--gwh-ivory-100); --gwh-accent:var(--gwh-gold-700); /* золото, читабельне на світлому */ --gwh-accent-strong:var(--gwh-gold-800); --gwh-accent-fill:var(--gwh-green-900); /* на світлому заливка кнопки — ЗЕЛЕНА */ --gwh-accent-fill-hover:var(--gwh-green-700); --gwh-on-accent:var(--gwh-ivory-100); --gwh-border:var(--gwh-alpha-ink-12); --gwh-border-strong:var(--gwh-ivory-300); --gwh-border-accent:var(--gwh-alpha-gold-32); --gwh-field-bg:var(--gwh-ivory-50); --gwh-focus-ring:var(--gwh-gold-700); --gwh-success:var(--gwh-success-600); --gwh-danger:var(--gwh-danger-600); --gwh-warning:var(--gwh-warning-600); --gwh-shadow:var(--gwh-shadow-sm); } /* ── SAND · друга світла ─────────────────────────────────────────────────── Щоб дві світлі секції поспіль не злилися в одну довгу простирадлову. Картки на ній беруть ivory-50 і тому «спливають» без потреби в тіні. */ .gwh-surface--sand{ --gwh-surface-bg:var(--gwh-ivory-200); --gwh-surface-raised:var(--gwh-ivory-50); --gwh-surface-sunken:var(--gwh-ivory-300); --gwh-text:var(--gwh-green-900); --gwh-text-secondary:var(--gwh-sand-700); --gwh-text-muted:var(--gwh-sand-600); --gwh-text-inverse:var(--gwh-ivory-100); --gwh-accent:var(--gwh-gold-700); --gwh-accent-strong:var(--gwh-gold-800); --gwh-accent-fill:var(--gwh-green-900); --gwh-accent-fill-hover:var(--gwh-green-700); --gwh-on-accent:var(--gwh-ivory-100); --gwh-border:var(--gwh-alpha-ink-12); --gwh-border-strong:var(--gwh-ivory-300); --gwh-border-accent:var(--gwh-alpha-gold-32); --gwh-field-bg:var(--gwh-ivory-50); --gwh-focus-ring:var(--gwh-gold-700); --gwh-success:var(--gwh-success-600); --gwh-danger:var(--gwh-danger-600); --gwh-warning:var(--gwh-warning-600); --gwh-shadow:var(--gwh-shadow-sm); } /* Типове замовчування — щоб компонент, випадково поставлений поза поверхнею, не лишився без кольорів і не «зник». Береться світла гама. */ :root{ --gwh-surface-bg:var(--gwh-ivory-100); --gwh-surface-raised:var(--gwh-ivory-50); --gwh-surface-sunken:var(--gwh-ivory-200); --gwh-text:var(--gwh-green-900); --gwh-text-secondary:var(--gwh-sand-700); --gwh-text-muted:var(--gwh-sand-600); --gwh-text-inverse:var(--gwh-ivory-100); --gwh-accent:var(--gwh-gold-700); --gwh-accent-strong:var(--gwh-gold-800); --gwh-accent-fill:var(--gwh-green-900); --gwh-accent-fill-hover:var(--gwh-green-700); --gwh-on-accent:var(--gwh-ivory-100); --gwh-border:var(--gwh-alpha-ink-12); --gwh-border-strong:var(--gwh-ivory-300); --gwh-border-accent:var(--gwh-alpha-gold-32); --gwh-field-bg:var(--gwh-ivory-50); --gwh-focus-ring:var(--gwh-gold-700); --gwh-success:var(--gwh-success-600); --gwh-danger:var(--gwh-danger-600); --gwh-warning:var(--gwh-warning-600); --gwh-shadow:var(--gwh-shadow-sm); }