/**
 * Horizon UI (Chakra free) — design tokens, 1:1 из theme.
 * Источник: horizon-ui-chakra / src/theme/styles.js + additions/card + components/*
 * Лицензия upstream: MIT (сохранить notice при копировании в прод).
 *
 * Префикс --hz-* чтобы не конфликтовать с --ds-* Ads Control.
 * Оверрайд бренда под продукт: --hz-brand: #3965FF (blue.500) вместо purple.
 */
:root {
  /* —— brand (purple, как в Horizon) —— */
  --hz-brand-100: #e9e3ff;
  --hz-brand-200: #422afb;
  --hz-brand-300: #422afb;
  --hz-brand-400: #7551ff;
  --hz-brand-500: #422afb;
  --hz-brand-600: #3311db;
  --hz-brand-700: #02044a;
  --hz-brand-800: #190793;
  --hz-brand-900: #11047a;

  /* удобный алиас */
  --hz-brand: var(--hz-brand-500);
  --hz-brand-hover: var(--hz-brand-600);
  --hz-brand-soft: #f2efff; /* lightBrand button bg */

  /* —— secondaryGray —— */
  --hz-gray-100: #e0e5f2;
  --hz-gray-200: #e1e9f8;
  --hz-gray-300: #f4f7fe; /* page bg */
  --hz-gray-400: #e9edf7;
  --hz-gray-500: #8f9bba;
  --hz-gray-600: #a3aed0;
  --hz-gray-700: #707eae;
  --hz-gray-800: #707eae;
  --hz-gray-900: #1b2559; /* primary text */

  /* —— semantic —— */
  --hz-red-100: #feefee;
  --hz-red-500: #ee5d50;
  --hz-red-600: #e31a1a;
  --hz-blue-50: #eff4fb;
  --hz-blue-500: #3965ff;
  --hz-orange-100: #fff6da;
  --hz-orange-500: #ffb547;
  --hz-green-100: #e6faf5;
  --hz-green-500: #01b574;

  /* —— navy (dark surfaces) —— */
  --hz-navy-50: #d0dcfb;
  --hz-navy-100: #aac0fe;
  --hz-navy-200: #a3b9f8;
  --hz-navy-300: #728fea;
  --hz-navy-400: #3652ba;
  --hz-navy-500: #1b3bbb;
  --hz-navy-600: #24388a;
  --hz-navy-700: #1b254b;
  --hz-navy-800: #111c44;
  --hz-navy-900: #0b1437;

  --hz-gray-page: #fafcfe; /* gray.100 */

  /* —— surfaces / text —— */
  --hz-bg: var(--hz-gray-300);
  --hz-surface: #ffffff;
  --hz-text: var(--hz-gray-900);
  --hz-text-secondary: var(--hz-gray-500);
  --hz-text-muted: var(--hz-gray-600);

  /* —— elevation (card.js / Sidebar.js) —— */
  --hz-shadow-card: 14px 17px 40px 4px rgba(112, 144, 176, 0.08);
  --hz-shadow-btn: 45px 76px 113px 7px rgba(112, 144, 176, 0.08);

  /* —— radii —— */
  --hz-radius-card: 20px;   /* Card */
  --hz-radius-btn: 16px;    /* Button base */
  --hz-radius-pill: 50px;   /* action / setup */
  --hz-radius-input: 16px;  /* Input main */
  --hz-radius-icon: 50%;    /* IconBox */

  /* —— layout —— */
  --hz-sidebar-w: 300px;    /* Sidebar.js */
  --hz-gap-grid: 20px;      /* default/index SimpleGrid gap */
  --hz-card-p: 20px;        /* Card baseStyle p */
  --hz-stat-py: 15px;       /* MiniStatistics Card py */

  /* —— type (Horizon global) —— */
  --hz-font: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hz-letter: -0.5px;
  --hz-font-stat-label: 14px;   /* Chakra sm ≈ 0.875rem */
  --hz-font-stat-value: 24px;   /* Chakra 2xl ≈ 1.5rem */
  --hz-font-growth: 12px;       /* xs */
}

/* Ads Control / Yandex-like type + brand (lab live twin) */
[data-hz-brand="ads"] {
  --hz-brand-100: #e9efff;
  --hz-brand-200: #3965ff;
  --hz-brand-300: #3965ff;
  --hz-brand-400: #3965ff;
  --hz-brand-500: #3965ff;
  --hz-brand-600: #2b4fd6;
  --hz-brand-700: #1b254b;
  --hz-brand-800: #1b3bbb;
  --hz-brand-900: #0b1437;
  --hz-brand-soft: #e9efff;

  /* Типографика ближе к Директ Про (YS Text ≈ Golos Text) */
  --hz-font: "Golos Text", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hz-letter: 0;
  --hz-letter-title: -0.01em;

  --hz-text: #1a1a1b;
  --hz-text-secondary: #858585;
  --hz-text-muted: #9a9a9a;
  --hz-gray-900: #1a1a1b;
  --hz-gray-500: #858585;
  --hz-gray-600: #9a9a9a;

  /*
   * Type scale (единый для всех lab-страниц).
   * Страницы НЕ задают свои font-size/weight — только эти токены / роли в horizon-lab-page.css.
   */
  --hz-fs-h1: 24px;
  --hz-fs-h2: 18px;
  --hz-fs-body: 14px;
  --hz-fs-ui: 13px;          /* period, chips, btn sm, table cell */
  --hz-fs-meta: 12px;        /* eyebrow, panel-sub, growth */
  --hz-fs-table-head: 11px;  /* table.data th, hub head, contrib head */
  --hz-fs-table-sub: 11px;   /* .ent span, hub sub */

  /* KPI strip (hero / measure / hub summary) — эталон live dash */
  --hz-fs-kpi-label: 12px;
  --hz-fs-kpi-value: 22px;
  --hz-lh-kpi-label: 1.2;
  --hz-lh-kpi-value: 1.15;
  --hz-ls-kpi-label: 0.01em;
  --hz-ls-kpi-value: -0.015em;

  /* алиасы старых имён → KPI scale (strip-k/v больше не 13/20) */
  --hz-font-stat-label: var(--hz-fs-kpi-label);
  --hz-font-stat-value: var(--hz-fs-kpi-value);
  --hz-font-growth: var(--hz-fs-meta);

  --hz-ls-table-head: 0.04em;

  --hz-fw-regular: 400;
  --hz-fw-medium: 500;
  --hz-fw-semi: 600;
  --hz-fw-bold: 600; /* Golos 700 на UI выглядит жирно — bold = semi */

  /* Surfaces ближе к Директ Про: нейтральный bg, flatter cards */
  --hz-gray-300: #f2f3f5;
  --hz-bg: #f2f2f2;
  --hz-gray-400: #e5e7eb;
  --hz-radius-card: 12px;
  --hz-radius-btn: 8px;
  --hz-radius-input: 8px;
  /* Тени = ощущение SaaS-шаблона; Яндекс почти flat */
  --hz-shadow-card: none;
  --hz-shadow-btn: none;
}