/* ============================================================================
   tokens.css — токены gidstroy.pro, версия «iOS-стиль».
   Источник значений: макет-эталон gidstroy-redesign.html (одобрен Артёмом 14.10.2026).
   Единственный источник цветов, шрифтов, радиусов, теней и easing всего фронта.
   Хардкод цветов в компонентах и модульных css ЗАПРЕЩЁН — только var(--…).

   Устройство файла:
     1. базовые токены макета (светлая тема);
     2. тёмная тема — по системной настройке (prefers-color-scheme) без явного
        выбора И по явному выбору data-theme="dark" (кнопка #themeBtn);
     3. алиасы старых имён канона (--c-*, --bg-*, --fg-*, --border-*, --shadow-*,
        --chart-*, --t-*, --r-*) → новые токены: модульные css (crm.css, finance.css,
        tasks.css …) продолжают работать без правок и сами переключают тему.
   ============================================================================ */

/* ------------------------------ 1. Светлая ------------------------------ */
:root {
  --accent: #0a6cff;
  --accent-hover: #0859d6;
  --accent-soft: rgba(10, 108, 255, .12);
  --accent-ink: #0a6cff;            /* акцентный текст (на тёмной теме светлее акцента) */
  --accent-glow: rgba(10, 108, 255, .28);

  --bg: #f2f3f7;                    /* фон приложения */
  --surface: #ffffff;               /* карточка */
  --surface-2: #f7f8fb;             /* вторая поверхность: подложки, бегунки, hover строк */
  --glass: rgba(255, 255, 255, .72);/* стекло: боковое меню, таб-бар, панели */

  --fg: #0b0c10;
  --fg-2: #4b5060;
  --fg-3: #8a8f9e;
  --fg-4: #c0c4cf;                  /* самый бледный: плейсхолдеры, выключенное */
  --sep: rgba(60, 60, 67, .12);     /* разделитель строк внутри списков */
  --sep-strong: rgba(60, 60, 67, .24);

  --good: #1f9d55;  --good-soft: rgba(31, 157, 85, .14);
  --bad: #e5484d;   --bad-soft: rgba(229, 72, 77, .14);
  --warn: #d98a10;  --warn-soft: rgba(217, 138, 16, .14);
  --violet: #7c5cff; --violet-soft: rgba(124, 92, 255, .14);
  --teal: #19a3a3;  --teal-soft: rgba(25, 163, 163, .14);

  --logo: #2c75ad;                  /* знак «РСК Гидстрой» (силуэт, fill: currentColor) */
  --on-accent: #ffffff;             /* текст на акценте / цветных кнопках (в обеих темах) */
  --scrim: rgba(0, 0, 0, .35);      /* затемнение под модалками */

  --shadow: 0 1px 2px rgba(20, 24, 40, .04), 0 8px 24px rgba(20, 24, 40, .06);
  --shadow-lift: 0 2px 4px rgba(20, 24, 40, .06), 0 18px 40px rgba(20, 24, 40, .12);
  --shadow-thumb: 0 1px 3px rgba(0, 0, 0, .12);   /* бегунок сегментированного переключателя */

  --font: "Geist", -apple-system, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  --mono: "Geist Mono", "SF Mono", ui-monospace, Menlo, monospace;

  --r: 18px;        /* карточки */
  --r-sm: 12px;     /* кнопки, карточки на досках, поля */
  --r-xl: 26px;     /* модалки и листы */

  --spring: cubic-bezier(.32, 1.25, .5, 1);
  --ease: cubic-bezier(.22, .8, .2, 1);

  --side-w: 264px;
  --tabbar-h: 64px;
  color-scheme: light;
}

/* ------------------------------ 2. Тёмная ------------------------------ */
/* системная тёмная тема — только пока явного выбора нет (нет data-theme) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent: #3d8cff; --accent-hover: #5c9fff; --accent-soft: rgba(61, 140, 255, .18); --accent-ink: #5c9fff; --accent-glow: rgba(61, 140, 255, .32);
    --bg: #000000; --surface: #1c1c1e; --surface-2: #2a2a2d; --glass: rgba(28, 28, 30, .72);
    --fg: #f5f5f7; --fg-2: #b3b6c2; --fg-3: #7d8190; --fg-4: #4a4e5c; --sep: rgba(84, 84, 88, .6); --sep-strong: rgba(84, 84, 88, .9);
    --good: #30d158; --good-soft: rgba(48, 209, 88, .16); --bad: #ff453a; --bad-soft: rgba(255, 69, 58, .18); --warn: #ffb340; --warn-soft: rgba(255, 179, 64, .16);
    --violet: #9d85ff; --violet-soft: rgba(157, 133, 255, .18); --teal: #3ad6d6; --teal-soft: rgba(58, 214, 214, .18);
    --scrim: rgba(0, 0, 0, .55); --logo: #6fb0ff;
    --shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 8px 24px rgba(0, 0, 0, .5);
    --shadow-lift: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 20px 48px rgba(0, 0, 0, .7);
    --shadow-thumb: 0 1px 3px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}
/* явный выбор кнопкой — те же значения */
:root[data-theme="dark"] {
  --accent: #3d8cff; --accent-hover: #5c9fff; --accent-soft: rgba(61, 140, 255, .18); --accent-ink: #5c9fff; --accent-glow: rgba(61, 140, 255, .32);
  --bg: #000000; --surface: #1c1c1e; --surface-2: #2a2a2d; --glass: rgba(28, 28, 30, .72);
  --fg: #f5f5f7; --fg-2: #b3b6c2; --fg-3: #7d8190; --fg-4: #4a4e5c; --sep: rgba(84, 84, 88, .6); --sep-strong: rgba(84, 84, 88, .9);
  --good: #30d158; --good-soft: rgba(48, 209, 88, .16); --bad: #ff453a; --bad-soft: rgba(255, 69, 58, .18); --warn: #ffb340; --warn-soft: rgba(255, 179, 64, .16);
  --violet: #9d85ff; --violet-soft: rgba(157, 133, 255, .18); --teal: #3ad6d6; --teal-soft: rgba(58, 214, 214, .18);
  --scrim: rgba(0, 0, 0, .55); --logo: #6fb0ff;
  --shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 8px 24px rgba(0, 0, 0, .5);
  --shadow-lift: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 20px 48px rgba(0, 0, 0, .7);
  --shadow-thumb: 0 1px 3px rgba(0, 0, 0, .5);
  color-scheme: dark;
}

/* ------------------- 3. Алиасы старых имён канона ------------------- */
/* Все значения — ссылки на базовые токены, поэтому в тёмной теме меняются сами. */
:root {
  /* бренд и AI-акцент — один синий акцент макета */
  --c-brand: var(--accent);
  --c-brand-hover: var(--accent-hover);
  --c-brand-soft: var(--accent-soft);
  --c-brand-glow: var(--accent-glow);
  --c-ai: var(--accent);
  --c-ai-hover: var(--accent-hover);
  --c-ai-soft: var(--accent-soft);

  /* текст */
  --c-ink: var(--fg);
  --c-ink-900: var(--fg);
  --c-ink-800: var(--fg);
  --c-ink-700: var(--fg-2);
  --c-ink-600: var(--fg-2);
  --c-ink-500: var(--fg-3);
  --c-ink-400: var(--fg-3);
  --c-ink-300: var(--fg-4);

  /* поверхности */
  --c-white: var(--surface);
  --c-bg: var(--bg);
  --c-surface: var(--surface);
  --c-surface-2: var(--surface-2);
  --c-hover: var(--surface-2);
  --c-inset: var(--surface-2);
  --c-line: var(--sep);
  --c-line-2: var(--sep);
  --c-line-3: var(--sep-strong);
  --c-line-strong: var(--fg);

  /* семантика статусов */
  --c-success: var(--good);
  --c-success-bg: var(--good-soft);
  --c-warning: var(--warn);
  --c-warning-bg: var(--warn-soft);
  --c-danger: var(--bad);
  --c-danger-strong: var(--bad);
  --c-danger-bg: var(--bad-soft);
  --c-info: var(--accent);
  --c-info-bg: var(--accent-soft);
  --c-blue: var(--accent);
  --c-blue-bg: var(--accent-soft);

  /* статусы жизненного цикла модуля / контуры CJM */
  --c-status-idea: var(--fg-3);
  --c-status-design: var(--accent);
  --c-status-mock: var(--warn);
  --c-status-contract: var(--violet);
  --c-status-connected: var(--teal);
  --c-status-verified: var(--good);
  --c-status-done: var(--good);
  --c-status-legacy: var(--fg-3);
  --c-contour-internal: var(--good);
  --c-contour-external: var(--accent);

  --c-accent-50: var(--accent-soft);
  --c-accent-500: var(--accent);
  --c-accent-600: var(--accent);
  --c-accent-700: var(--accent-hover);
  --c-brand-tint: var(--accent-soft);

  /* семантические роли */
  --bg-app: var(--bg);
  --bg-surface: var(--surface);
  --bg-surface-2: var(--surface-2);
  --bg-sidebar: var(--glass);
  --bg-hover: var(--surface-2);
  --bg-active: var(--accent-soft);
  --bg-inset: var(--surface-2);
  --bg-subtle: var(--surface-2);

  --fg-default: var(--fg);
  --fg-muted: var(--fg-3);
  --fg-subtle: var(--fg-3);
  --fg-on-accent: var(--on-accent);
  --fg-on-sidebar: var(--fg-2);
  --fg-on-sidebar-strong: var(--fg);

  --border-default: var(--sep);
  --border-strong: var(--sep-strong);
  --focus: var(--accent);
  --ring: var(--accent-soft);

  /* типографика: Geist везде, серифный дисплей убран (заголовки — Geist 700) */
  --font-sans: var(--font);
  --font-serif: var(--font);
  --font-mono: var(--mono);

  --fs-xs: 11px;
  --fs-sm: 12px;      /* подписи */
  --fs-row: 13px;     /* строки в карточках, заголовки карточек на досках */
  --fs-base: 14px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-h4: 20px;
  --fs-h3: 22px;
  --fs-h2: 28px;
  --fs-h1: 28px;
  --fs-xl: 20px;
  --fs-2xl: 24px;
  --fs-3xl: 28px;     /* большие числа в карточках (на телефоне 22px — см. components.css) */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 700;   /* Geist подключён до 700 */

  --lh-tight: 1.15;
  --lh-normal: 1.45;

  /* отступы (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;

  /* радиусы: старые имена → макет (карточка 18, кнопка 12, модалка 26) */
  --r-md: var(--r-sm);
  --r-lg: var(--r);
  --r-2xl: var(--r-xl);
  --r-full: 999px;

  /* тени */
  --shadow-xs: var(--shadow);
  --shadow-sm: var(--shadow);
  --shadow-md: var(--shadow-lift);
  --shadow-lg: var(--shadow-lift);
  --shadow-brand: 0 4px 12px var(--accent-glow);

  /* раскладка */
  --sidebar-w: var(--side-w);
  --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: 150ms var(--ease);
  --t-base: 250ms var(--ease);
  --t-spring: 350ms var(--spring);

  /* высоты контролов: кнопка/поле 36 (макет), служебные 30, мелкие 26 */
  --h-xs: 26px;
  --h-sm: 30px;
  --h-md: 36px;
  --h-lg: 48px;

  --h-table-header: 34px;
  --h-table-row: 44px;
  --h-table-row-compact: 36px;
  --h-table-row-comfortable: 52px;
  --h-toolbar: 48px;
  --toolbar-pad-y: 6px;
  --ez-control-height-md: var(--h-md);
  --ez-control-radius-md: var(--r-sm);
  --ez-control-gap: var(--sp-2);

  /* фон без градиента: ровный --bg, как в макете */
  --grad-canvas: none;

  /* --- Палитра графиков: смысл цвета фиксирован ---
     good=зелёный · warning=жёлтый · critical=красный · info=акцент · ai=фиолетовый · neutral=серый */
  --chart-green: var(--good);
  --chart-yellow: var(--warn);
  --chart-red: var(--bad);
  --chart-blue: var(--accent);
  --chart-purple: var(--violet);
  --chart-gray: var(--fg-3);
  --chart-green-soft: var(--good-soft);
  --chart-yellow-soft: var(--warn-soft);
  --chart-red-soft: var(--bad-soft);
  --chart-blue-soft: var(--accent-soft);
  --chart-purple-soft: var(--violet-soft);
  --chart-gray-soft: var(--surface-2);
  --chart-grid: var(--sep);
  --chart-axis: var(--fg-3);
  --chart-track: var(--surface-2);
  /* серийная палитра (ряды без статусного смысла) */
  --chart-s1: var(--accent);
  --chart-s2: var(--good);
  --chart-s3: var(--warn);
  --chart-s4: var(--teal);
  --chart-s5: var(--bad);
  --chart-s6: var(--violet);
  --chart-shadow: var(--shadow);
  --chart-green-glow: var(--good-soft);
  --chart-yellow-glow: var(--warn-soft);
  --chart-red-glow: var(--bad-soft);
  --chart-blue-glow: var(--accent-soft);
  --chart-purple-glow: var(--violet-soft);
  --chart-card-shadow: var(--shadow);
  --chart-card-shadow-hover: var(--shadow-lift);
  --chart-glow-good: 0 0 0 4px var(--good-soft);
  --chart-glow-warning: 0 0 0 4px var(--warn-soft);
  --chart-glow-critical: 0 0 0 4px var(--bad-soft);
  --chart-glow-info: 0 0 0 4px var(--accent-soft);
  --chart-glow-ai: 0 0 0 4px var(--violet-soft);
  --chart-glow-neutral: 0 0 0 4px var(--surface-2);
  /* подсказка на графике — тёмная таблетка (макет .tip): фон = цвет текста, текст = цвет фона */
  --chart-tip-bg: var(--fg);
  --chart-tip-fg: var(--bg);
  --chart-tip-border: transparent;

  /* публичный контракт @/design-system */
  --color-brand: var(--accent);
  --color-brand-soft: var(--accent-soft);
  --color-ai: var(--accent);
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-surface-2: var(--surface-2);
  --color-text: var(--fg);
  --color-text-secondary: var(--fg-2);
  --color-muted: var(--fg-3);
  --color-line: var(--sep);
  --color-success: var(--good);
  --color-warning: var(--warn);
  --color-danger: var(--bad);
  --radius-button: var(--r-sm);
  --radius-card: var(--r);
  --radius-pill: var(--r-full);
  --shadow-card: var(--shadow);
  --shadow-pop: var(--shadow-lift);
  --shadow-modal: var(--shadow-lift);
  --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(--surface);

  /* имена из модульных css с запасным значением (ecosystem.css, tasks.css) */
  --text-secondary: var(--fg-2);
  --s-3: var(--sp-3);
}