/* ============================================================================
   tokens.css — БРЕНД EMAILZAVR. Палитра/типографика сняты с прод-сайта
   https://emailzavr.com/en (--ez-* токены из их CSS). Анатомия компонентов
   (формы кнопок/инпутов/состояния) — из Figma "Godji Games" UI Elements.
   Единственный источник правил всего фронта. Хардкод в компонентах ЗАПРЕЩЁН.
   ============================================================================ */

:root {
  /* --- Бренд: зелёный (наш primary, из emailzavr.com) --- */
  --c-brand: #16a34a;
  --c-brand-hover: #128a3e;
  --c-brand-soft: #e6f6ec;
  --c-brand-glow: rgba(22, 163, 74, 0.28);

  /* --- AI-акцент (индиго/синий, из emailzavr.com --ez-ai) --- */
  --c-ai: #2f6df0;
  --c-ai-hover: #2257cc;
  --c-ai-soft: #e7eefc;

  /* --- Текст (тёплый near-black) --- */
  --c-ink: #1a1a18;
  --c-ink-900: #141413;   /* максимальный контраст — основные данные таблиц */
  --c-ink-800: #1f1e1d;
  --c-ink-700: #3a3833;
  --c-ink-600: #514f49;   /* вторичные подписи (читаемый, не бледный) */
  --c-ink-500: #6b6a64;   /* muted */
  --c-ink-400: #9b9a92;
  --c-ink-300: #c4c2b8;

  /* --- Поверхности (тёплый крем) --- */
  --c-white: #ffffff;
  --c-bg: #faf9f5;            /* фон приложения */
  --c-surface: #ffffff;
  --c-surface-2: #f4f2ec;    /* surface-soft */
  --c-hover: #f4f2ec;
  --c-inset: #f0eee7;
  --c-line: #ece9e3;         /* тёплый бордер */
  --c-line-2: #e2dfd6;
  --c-line-3: #d4d0c4;
  --c-line-strong: #1a1a18;

  /* --- Семантика статусов --- */
  --c-success: #1a8f5e;
  --c-success-bg: #e6f6ec;
  --c-warning: #b26b00;
  --c-warning-bg: #fdf4e3;
  --c-danger: #c93535;
  --c-danger-strong: #dc2626;
  --c-danger-bg: #fbeaea;
  --c-info: #2f6df0;
  --c-info-bg: #e7eefc;
  --c-blue: #2f6df0;
  --c-blue-bg: #e7eefc;

  /* --- Статусы жизненного цикла модуля --- */
  --c-status-idea: #c4c2b8;
  --c-status-design: #2f6df0;
  --c-status-mock: #b26b00;
  --c-status-contract: #8b5cf6;
  --c-status-connected: #0ea5a5;
  --c-status-verified: #16a34a;
  --c-status-done: #128a3e;
  --c-status-legacy: #9b9a92;

  /* контуры CJM */
  --c-contour-internal: #16a34a;
  --c-contour-external: #2f6df0;

  /* совместимость со старыми именами */
  --c-accent-50: var(--c-brand-soft);
  --c-accent-500: var(--c-brand);
  --c-accent-600: var(--c-brand);
  --c-accent-700: var(--c-brand-hover);
  --c-brand-tint: var(--c-brand-soft);

  /* --- Семантические роли (light) --- */
  --bg-app: var(--c-bg);
  --bg-surface: var(--c-white);
  --bg-surface-2: var(--c-surface-2);
  --bg-sidebar: #0b1220;          /* deep ink (из --ez-btn--dark) */
  --bg-hover: var(--c-hover);
  --bg-active: var(--c-brand-soft);
  --bg-inset: var(--c-inset);

  --fg-default: var(--c-ink-800);
  --fg-muted: var(--c-ink-500);
  --fg-subtle: var(--c-ink-400);
  --fg-on-accent: #ffffff;
  --fg-on-sidebar: #aeb4c2;
  --fg-on-sidebar-strong: #ffffff;

  --border-default: var(--c-line);
  --border-strong: var(--c-line-3);
  --accent: var(--c-brand);
  --accent-hover: var(--c-brand-hover);
  --focus: var(--c-brand);
  --ring: rgba(22, 163, 74, 0.22);   /* фокус-кольцо = бренд-зелёный */

  /* --- Типографика: Inter (UI) + Gelasio (serif-дисплей) --- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Gelasio", Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-xs: 12px;
  --fs-sm: 12px;
  --fs-base: 14px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-h4: 20px;
  --fs-h3: 24px;
  --fs-h2: 28px;
  --fs-h1: 34px;
  --fs-xl: 20px;
  --fs-2xl: 28px;
  --fs-3xl: 34px;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --lh-tight: 1.15;
  --lh-normal: 1.5;

  /* --- Отступы (4px) --- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

  /* --- Радиусы (скруглённые, из emailzavr.com) --- */
  --r-sm: 10px;
  --r-md: 12px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-2xl: 26px;
  --r-full: 999px;

  /* --- Тени (тёплые, ink-base) --- */
  --shadow-xs: 0 1px 2px rgba(31, 30, 29, 0.05);
  --shadow-sm: 0 2px 8px rgba(31, 30, 29, 0.05);
  --shadow-md: 0 10px 30px rgba(31, 30, 29, 0.07);
  --shadow-lg: 0 20px 50px rgba(31, 30, 29, 0.14);
  --shadow-brand: 0 6px 16px var(--c-brand-glow);

  /* --- Раскладка (шире) --- */
  --sidebar-w: 264px;
  --topbar-h: 64px;
  --content-max: 1480px;

  /* --- Слои (z-index) — единая система --- */
  --z-base: 1;
  --z-sticky: 20;
  --z-dropdown: 1000;
  --z-modal: 2000;
  --z-toast: 3000;

  /* --- Анимация --- */
  --t-fast: 130ms cubic-bezier(.4, 0, .2, 1);
  --t-base: 220ms cubic-bezier(.4, 0, .2, 1);
  --t-spring: 320ms cubic-bezier(.34, 1.56, .64, 1);

  /* высоты контролов */
  /* ЕДИНЫЙ КОМПАКТНЫЙ СТАНДАРТ высот контролов (ТЗ 2026-06-05):
     default 34 / small 30 / icon 30 / xs 26. Плотная SaaS-админка, НЕ 44.
     Только эти размеры для интерактивных элементов (+ lg для hero). */
  --h-xs: 26px;   /* CONTROL_HEIGHT_XS — очень мелкие служебные места */
  --h-sm: 30px;   /* CONTROL_HEIGHT_SMALL — copy/icon/служебные/footer */
  --h-md: 34px;   /* CONTROL_HEIGHT_DEFAULT — кнопки, input, select, search, toolbar, pills */
  --h-lg: 50px;   /* крупные hero-кнопки (отдельно) */

  /* высоты таблицы — РАЗВЯЗАНЫ с контролами: контролы компактные (34/30),
     а строки таблицы остаются читаемыми. Только эти токены задают высоту
     header/строк → density переключается централизованно. */
  --h-table-header: 34px;          /* TABLE_HEADER_HEIGHT — тонкий header */
  --h-table-row: 44px;             /* TABLE_ROW_DEFAULT — обычная строка */
  --h-table-row-compact: 36px;     /* TABLE_ROW_COMPACT */
  --h-table-row-comfortable: 52px; /* TABLE_ROW_COMFORTABLE */

  /* верхние панели (toolbar/footer/sticky) — тонкие, не «жирная плашка» */
  --h-toolbar: 48px;               /* TOOLBAR_MAX_HEIGHT — ориентир высоты строки */
  --toolbar-pad-y: 6px;            /* вертикальный паддинг тулбара (34 + 12 = 46 ≤ 48) */

  /* единый размер контролов в верхней панели таблиц (table toolbar).
     Все элементы тулбара (поиск, select, кнопка, segmented, density, sort,
     icon-button) ссылаются ТОЛЬКО на эти токены → одинаковая высота и плотность. */
  --ez-control-height-md: var(--h-md);   /* 34px — системная высота контрола */
  --ez-control-radius-md: var(--r-md);   /* 12px — CONTROL_RADIUS */
  --ez-control-gap: var(--sp-2);         /* 8px — CONTROL_GAP */

  /* фоновый «живой» градиент канваса (как hero emailzavr.com, очень мягкий) */
  --grad-canvas:
    radial-gradient(1100px 600px at 92% -8%, rgba(22, 163, 74, 0.06), transparent 60%),
    radial-gradient(900px 520px at -5% 0%, rgba(47, 109, 240, 0.05), transparent 55%);

  /* --- Палитра графиков (единый язык визуальной аналитики) ---
     Смысл цвета фиксирован: его нельзя переиспользовать под другой статус.
     good=зелёный · warning=жёлтый · critical=красный · info=синий ·
     ai=фиолетовый · neutral=серый. Используйте только эти токены. */
  /* Тон взят из импортированных Figma-графиков (мягкие пастельные серии).
     Смысл цвета сохранён: good=зелёный, warning=оранж, critical=коралл и т.д. */
  --chart-green:  #6FD195;            /* норма / успех (Figma) */
  --chart-yellow: #FFAE4C;            /* предупреждение (Figma orange) */
  --chart-red:    #FF8A84;            /* критично / ошибка (Figma coral) */
  --chart-blue:   #7086FD;            /* информационный / серия (Figma indigo) */
  --chart-purple: #988AFC;            /* AI / автоматизация (Figma purple) */
  --chart-gray:   var(--c-ink-300);   /* неактивно / нет данных */

  /* мягкие подложки секторов/столбиков (для hover-подсветки строк легенды) */
  --chart-green-soft:  color-mix(in srgb, var(--chart-green) 18%, transparent);
  --chart-yellow-soft: color-mix(in srgb, var(--chart-yellow) 18%, transparent);
  --chart-red-soft:    color-mix(in srgb, var(--chart-red) 18%, transparent);
  --chart-blue-soft:   color-mix(in srgb, var(--chart-blue) 16%, transparent);
  --chart-purple-soft: color-mix(in srgb, var(--chart-purple) 16%, transparent);
  --chart-gray-soft:   var(--c-inset);

  /* нейтральная сетка/оси графиков — очень светлые, не отвлекают от данных */
  --chart-grid:  var(--c-line);
  --chart-axis:  var(--c-ink-400);
  --chart-track: var(--c-inset);      /* фон незаполненной части gauge/bar */

  /* серийная палитра — когда у точек нет смыслового статуса (просто разные ряды).
     Порядок подобран на контраст и спокойствие, без кислоты. */
  /* серийная палитра = Figma-эталон (индиго/зелёный/оранж/циан/коралл/фиолет) */
  --chart-s1: #7086FD;
  --chart-s2: #6FD195;
  --chart-s3: #FFAE4C;
  --chart-s4: #07DBFA;
  --chart-s5: #FF8A84;
  --chart-s6: #988AFC;

  /* semi-3D: мягкая тень под объёмными элементами (donut/gauge/bar) и свечения */
  --chart-shadow: rgba(20, 26, 30, 0.16);
  --chart-green-glow:  rgba(22, 163, 74, 0.22);
  --chart-yellow-glow: rgba(217, 119, 6, 0.22);
  --chart-red-glow:    rgba(220, 38, 38, 0.22);
  --chart-blue-glow:   rgba(37, 99, 235, 0.22);
  --chart-purple-glow: rgba(124, 58, 237, 0.22);

  /* premium dashboard: тени карточки и glow активного элемента (hover/selected) */
  --chart-card-shadow:       0 14px 40px rgba(15, 23, 42, 0.07);
  --chart-card-shadow-hover: 0 22px 60px rgba(15, 23, 42, 0.13);
  --chart-glow-good:    0 0 26px rgba(22, 163, 74, 0.42);
  --chart-glow-warning: 0 0 26px rgba(217, 119, 6, 0.42);
  --chart-glow-critical:0 0 26px rgba(220, 38, 38, 0.42);
  --chart-glow-info:    0 0 26px rgba(37, 99, 235, 0.40);
  --chart-glow-ai:      0 0 26px rgba(124, 58, 237, 0.46);
  --chart-glow-neutral: 0 0 22px rgba(115, 115, 115, 0.30);
  /* стекло tooltip */
  --chart-tip-bg: color-mix(in srgb, var(--bg-surface) 86%, transparent);
  --chart-tip-border: color-mix(in srgb, var(--c-ink-800) 14%, transparent);
}

/* ============================== Тёмная тема ============================== */
:root[data-theme="dark"] {
  --bg-app: #0b0f0d;
  --bg-surface: #12161a;
  --bg-surface-2: #171c20;
  --bg-sidebar: #070a09;
  --bg-hover: rgba(255, 255, 255, 0.05);
  --bg-active: rgba(22, 163, 74, 0.18);
  --bg-inset: rgba(255, 255, 255, 0.05);
  --chart-shadow: rgba(0, 0, 0, 0.40);   /* глубже на тёмном фоне */
  --chart-card-shadow:       0 14px 40px rgba(0, 0, 0, 0.35);
  --chart-card-shadow-hover: 0 22px 60px rgba(0, 0, 0, 0.50);
  --chart-tip-bg: color-mix(in srgb, var(--bg-surface-2) 88%, transparent);
  --chart-tip-border: color-mix(in srgb, #ffffff 12%, transparent);

  --fg-default: #ecebe6;
  --fg-muted: #9b9a92;
  --fg-subtle: #74736c;
  --fg-on-sidebar: #9b9a92;

  --border-default: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.20);
  --accent: #22c55e;
  --accent-hover: #16a34a;
  --ring: rgba(34, 197, 94, 0.3);

  --c-surface: #12161a;
  --c-surface-2: #171c20;
  --c-line: rgba(255,255,255,0.10);
  --c-line-2: rgba(255,255,255,0.14);
  --c-line-3: rgba(255,255,255,0.22);
  --c-ink-900: #f6f5f0;   /* максимальный контраст на тёмном фоне */
  --c-ink-800: #ecebe6;
  --c-ink-700: #c4c2b8;
  --c-ink-600: #b4b2a8;
  --c-ink-500: #9b9a92;
  --c-brand-soft: rgba(22, 163, 74, 0.18);
  --c-ai-soft: rgba(47, 109, 240, 0.18);
  --c-success-bg: rgba(26, 143, 94, 0.18);
  --c-warning-bg: rgba(178, 107, 0, 0.18);
  --c-danger-bg: rgba(201, 53, 53, 0.18);
  --c-info-bg: rgba(47, 109, 240, 0.18);
  --c-blue-bg: rgba(47, 109, 240, 0.18);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.6);

  --grad-canvas:
    radial-gradient(1100px 600px at 92% -8%, rgba(22, 163, 74, 0.08), transparent 60%),
    radial-gradient(900px 520px at -5% 0%, rgba(47, 109, 240, 0.06), transparent 55%);
}

/* ============================================================================
   Алиасы дизайн-токенов (публичный контракт @/design-system).
   Каноничные значения — выше (--c-*, --bg-*, --r-*, --sp-*, --shadow-*).
   Эти имена — стабильный публичный API токенов; используйте их на страницах:
   var(--color-brand), var(--radius-card), var(--shadow-card), var(--space-4) …
   Тёмная тема наследуется автоматически (ссылаются на каноничные переменные).
   ============================================================================ */
:root {
  --color-brand: var(--c-brand);
  --color-brand-soft: var(--c-brand-soft);
  --color-ai: var(--c-ai);
  --color-bg: var(--bg-app);
  --color-surface: var(--bg-surface);
  --color-surface-2: var(--bg-surface-2);
  --color-text: var(--c-ink-800);
  --color-text-secondary: var(--c-ink-500);
  --color-muted: var(--c-ink-500);
  --color-line: var(--border-default);
  --color-success: var(--c-success);
  --color-warning: var(--c-warning);
  --color-danger: var(--c-danger);

  --radius-button: var(--r-md);
  --radius-card: var(--r-lg);
  --radius-pill: var(--r-full);

  --shadow-card: var(--shadow-sm);
  --shadow-pop: var(--shadow-md);
  --shadow-modal: var(--shadow-lg);

  --space-1: var(--sp-1);
  --space-2: var(--sp-2);
  --space-3: var(--sp-3);
  --space-4: var(--sp-4);
  --space-5: var(--sp-5);
  --space-6: var(--sp-6);
  --space-8: var(--sp-8);

  --surface-card: var(--bg-surface);   /* фон-маска для каретки-логотипа */
}