veilix.app/src/styles/tokens.css

/*
 * Токены брендов из <style> прототипов design/handoff/project.
 * Бренд — атрибут data-site на <html>, тема — data-theme (ставит скрипт в <head> до отрисовки).
 * --sel — подсветка выбранного пункта: у Вейликса это --accent-soft, у ВейликсВПН свой цвет.
 * Цвета карты (--land, --land-line, --ocean) — плоская карта локаций (Locations). Глобус на главной
 * (--globe-*) у Вейликса светлее, как в Main: он лежит под стеклянными пластинами. У ВейликсВПН
 * значения в макетах одинаковые.
 * --ink-3 светлее или темнее, чем в макетах (60/63/60/65%): так вторичный текст даёт контраст
 * не ниже 4,5:1 (WCAG AA) на всех фонах темы, включая выделенные карточки (решение этапа 1b).
 */

[data-site='dedicated'] {
  --bg: oklch(99% 0.005 296);
  --surface: oklch(100% 0 0);
  --surface-2: oklch(97.5% 0.01 296);
  --ink: oklch(24% 0.04 296);
  --ink-2: oklch(45% 0.03 296);
  --ink-3: oklch(53% 0.025 296);
  --border: oklch(92% 0.014 296);
  --accent: oklch(45% 0.17 296);
  --accent-hover: oklch(38% 0.17 296);
  --accent-soft: oklch(95.5% 0.028 296);
  --sel: var(--accent-soft);
  --on-accent: oklch(99% 0.01 296);
  --glow-1: oklch(86% 0.1 296);
  --glow-2: oklch(89% 0.09 266);
  --glow-3: oklch(91% 0.08 332);
  --veil: oklch(100% 0 0 / 0.55);
  --warn: oklch(62% 0.14 62);
  --tg: oklch(62% 0.15 250);
  --land: oklch(93% 0.015 296);
  --land-line: oklch(87% 0.02 296);
  --ocean: oklch(97.5% 0.007 296);
  --globe-land: oklch(95% 0.012 296);
  --globe-line: oklch(90% 0.018 296);
  --globe-ocean: var(--ocean);
  --shadow: 0 1px 2px oklch(24% 0.04 296 / 0.05), 0 12px 32px -12px oklch(24% 0.04 296 / 0.14);
}

[data-site='dedicated'][data-theme='dark'] {
  --bg: oklch(17% 0.022 296);
  --surface: oklch(21% 0.026 296);
  --surface-2: oklch(24% 0.03 296);
  --ink: oklch(96% 0.01 296);
  --ink-2: oklch(79% 0.02 296);
  --ink-3: oklch(66% 0.025 296);
  --border: oklch(31% 0.032 296);
  --accent: oklch(74% 0.15 296);
  --accent-hover: oklch(80% 0.13 296);
  --accent-soft: oklch(27% 0.05 296);
  --on-accent: oklch(17% 0.03 296);
  --glow-1: oklch(45% 0.16 296);
  --glow-2: oklch(40% 0.14 266);
  --glow-3: oklch(42% 0.13 332);
  --veil: oklch(100% 0 0 / 0.07);
  --warn: oklch(78% 0.13 62);
  --tg: oklch(70% 0.13 250);
  --land: oklch(27% 0.03 296);
  --land-line: oklch(34% 0.035 296);
  --ocean: oklch(24% 0.025 296);
  --globe-land: oklch(27% 0.028 296);
  --globe-line: oklch(32% 0.032 296);
  --shadow: 0 1px 2px oklch(10% 0.02 296 / 0.4), 0 16px 40px -16px oklch(8% 0.02 296 / 0.7);
}

[data-site='mass'] {
  --bg: oklch(99.6% 0.0015 215);
  --surface: oklch(100% 0 0);
  --surface-2: oklch(98.4% 0.003 215);
  --ink: oklch(24% 0.04 204);
  --ink-2: oklch(45% 0.03 204);
  --ink-3: oklch(53% 0.025 204);
  --border: oklch(92% 0.014 200);
  --accent: oklch(48% 0.105 178);
  --accent-hover: oklch(41% 0.1 178);
  --accent-soft: oklch(95.5% 0.032 180);
  --sel: oklch(96.5% 0.016 190);
  --on-accent: oklch(99% 0.01 180);
  --glow-1: oklch(86% 0.085 190);
  --glow-2: oklch(88% 0.075 205);
  --glow-3: oklch(89% 0.07 172);
  --veil: oklch(100% 0 0 / 0.55);
  --warn: oklch(62% 0.14 62);
  --tg: oklch(62% 0.15 250);
  --land: oklch(95% 0.012 196);
  --land-line: oklch(90% 0.018 196);
  --ocean: oklch(97.5% 0.007 196);
  --globe-land: var(--land);
  --globe-line: var(--land-line);
  --globe-ocean: var(--ocean);
  --shadow: 0 1px 2px oklch(24% 0.04 204 / 0.05), 0 12px 32px -12px oklch(24% 0.04 204 / 0.14);
}

[data-site='mass'][data-theme='dark'] {
  --bg: oklch(23% 0.026 210);
  --surface: oklch(26.5% 0.028 210);
  --surface-2: oklch(30% 0.03 210);
  --ink: oklch(96% 0.012 196);
  --ink-2: oklch(80% 0.02 196);
  --ink-3: oklch(69% 0.025 196);
  --border: oklch(36% 0.04 204);
  --accent: oklch(76% 0.105 190);
  --accent-hover: oklch(83% 0.09 190);
  --accent-soft: oklch(31% 0.05 190);
  --sel: oklch(30% 0.03 195);
  --on-accent: oklch(20% 0.04 204);
  --glow-1: oklch(52% 0.09 200);
  --glow-2: oklch(47% 0.085 215);
  --glow-3: oklch(50% 0.08 180);
  --veil: oklch(100% 0 0 / 0.07);
  --warn: oklch(78% 0.13 62);
  --tg: oklch(70% 0.13 250);
  --land: oklch(31% 0.035 204);
  --land-line: oklch(37% 0.04 204);
  --ocean: oklch(27% 0.035 204);
  --shadow: 0 1px 2px oklch(12% 0.03 204 / 0.4), 0 16px 40px -16px oklch(9% 0.03 204 / 0.7);
}