/** * brand-tokens.css — Оксфорд Медікал Львів · Design Tokens v1.0 * Єдине джерело CSS custom properties для всіх сторінок сайту. * Підключається в першим, до будь-яких інших стилів. * * Оновлено: травень 2026 * Джерело: Oxford Medical Brand Guidelines v1.0 * Форк: onclinic-web brand-tokens.css → замінено navy/gold/crimson → cyan/green/ink */ :root { /* ─── PRIMARY CYAN (основний бренд, замінює navy) ──────────────── */ --ox-cyan: #1DB7ED; /* primary — кнопки, hero CTA, eyebrow-лінія */ --ox-cyan-dark: #0E94C4; /* hover-стан для CTA і посилань */ --ox-cyan-light: #E8F7FD; /* selected state, light section backgrounds */ --ox-cyan-pale: #F4FBFE; /* subtle background / callout bg */ /* ─── GREEN ACCENT (success / secondary CTA, замінює gold) ──────── */ --ox-green: #6BD333; /* accent — secondary CTA, success-стани, теги */ --ox-green-dark: #4FA821; /* hover для green CTA */ --ox-green-light:#EFFBE5; /* success callout background */ /* ─── DARK / INK (hero bg, H1, темні секції) ────────────────────── */ --ink: #0E1F2E; /* темний hero / темні секції */ --ink-soft: #1F3346; /* вторинний dark */ /* ─── GRAY SCALE ────────────────────────────────────────────────── */ --gray-50: #fafbfc; --gray-100: #F3F4F6; --gray-200: #E5E7EB; --gray-300: #D1D5DB; --gray-400: #9CA3AF; --gray-500: #6B7280; --gray-600: #4B5563; --gray-700: #374151; --gray-900: #1a1a1a; /* ─── SEMANTIC ALIASES ──────────────────────────────────────────── */ --bg: #f8fafc; /* page background (off-white) */ --white: #ffffff; --text: #0E1F2E; /* основний текст = ink */ --muted: #64748b; /* другорядний текст, підписи */ --border: #e2e8f0; /* рамки карток, розділювачі */ --radius: 12px; /* border-radius default */ /* ─── BACKWARD-COMPAT ALIASES (для форму і компонентів) ─────────── */ /* Компоненти що посилаються на --blue-* або --gold → redirect → cyan/green */ --blue-deep: var(--ox-cyan); --blue: var(--ox-cyan); --blue-mid: var(--ox-cyan-dark); --blue-light: var(--ox-cyan-light); --gold: var(--ox-green); --gold2: var(--ox-green-dark); --gold-light: var(--ox-green-light); --gold-mid: #C6EFA0; --gold-bg: var(--ox-green-light); /* ─── 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); }