/** * brand-tokens.css — ОН Клінік Харків · Design Tokens v2.0 * Єдине джерело CSS custom properties для всіх сторінок сайту. * Підключається в першим, до будь-яких інших стилів. * * Оновлено: травень 2026 * Джерело: onclinic-brand-guidelines v2.0 + union з усіх HTML сторінок */ :root { /* ─── PRIMARY BLUE ──────────────────────────────────────────────── */ --blue-deep: #0B4F9A; /* primary — кнопки, hero, заголовки H2/H3 */ --blue: #0B4F9A; /* alias --blue-deep (зворотна сумісність) */ --blue-mid: #1a6bc7; /* secondary — hover-стани, акценти */ --blue-light: #dbeafe; /* selected state, light backgrounds */ /* ─── GOLD ACCENT ───────────────────────────────────────────────── */ --gold: #C49A1A; /* accent — CTA кнопки, ціни, іконки E-E-A-T */ --gold2: #e8b820; /* gold hover */ --gold-light: #FBF6E2; /* callout / tag background (warm light) */ --gold-mid: #F0DFA0; /* gold mid-tone (розділювачі, бейджі) */ --gold-bg: #fffbeb; /* warning callout background */ /* ─── GRAY SCALE ────────────────────────────────────────────────── */ --gray-50: #F9FAFB; --gray-100: #F3F4F6; --gray-200: #E5E7EB; --gray-300: #D1D5DB; --gray-400: #9CA3AF; --gray-500: #6B7280; --gray-600: #6B7280; /* intentionally same as 500 in current design */ --gray-700: #374151; --gray-900: #111827; /* ─── SEMANTIC ALIASES ──────────────────────────────────────────── */ --bg: #f8fafc; /* page background (off-white) */ --white: #ffffff; --text: #0f172a; /* основний текст (майже чорний) */ --muted: #64748b; /* другорядний текст, підписи */ --border: #e2e8f0; /* рамки карток, розділювачі */ --radius: 12px; /* border-radius default */ /* ─── SPECIAL ───────────────────────────────────────────────────── */ --teal: #00A896; /* accent для загальної хірургії (index.html only) */ /* ─── SHADOWS ───────────────────────────────────────────────────── */ --shadow-sm: 0 1px 6px rgba(0,0,0,.06); --shadow-md: 0 4px 20px rgba(0,0,0,.08); --shadow-lg: 0 8px 40px rgba(0,0,0,.10); }