/* ==========================================================================
   FeedCRM — токены дизайна (v13 «Маркет»). Единственный источник значений.
   Кабинет, вход и прототип design/v13 берут цвета, радиусы, тени, слои и шрифт
   только отсюда. Новых переменных в других файлах не заводим: нужен новый
   оттенок — добавьте его здесь, в раздел 1, и при необходимости в тёмную тему.
   Раздел 3 — старые имена (app.css, foundation.css, v12): они указывают на
   токены раздела 1, чтобы старая вёрстка выглядела так же, как новая.
   Правила — docs/design/FEEDCRM_V13_DESIGN.md.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Токены
   -------------------------------------------------------------------------- */
:root {
  /* Холст и поверхности: тёплый серый холст, белые карточки без рамок */
  --canvas: #F2F1EE;
  --surface: #FFFFFF;
  --surface-2: #FAF9F7;       /* вложенные блоки внутри карточки */
  --fill: #F0EFEC;            /* поля, вторичные кнопки, трек сегментов */
  --fill-hover: #E8E6E2;
  --fill-strong: #E1DFDA;
  --line: #ECEAE6;            /* редкие разделители */
  --line-strong: #DCD9D3;

  /* Текст */
  --ink: #141414;
  --ink-2: #5E5E5B;
  --ink-3: #8F8E8A;
  --ink-inverse: #FFFFFF;

  /* Смысловые цвета: синий — действие и «сегодня», зелёный — деньги и звонок,
     красный — просрочка и ошибки, янтарный — клиент ждёт, фиолетовый — ИИ, голубой — счёт */
  --blue: #0A93FF;
  --blue-hover: #0080E6;
  --blue-soft: #E6F3FF;
  --blue-ink: #0067C2;
  --blue-strong: #0072DB;     /* заливка кнопок с белым текстом: контраст 4,7:1 (у --blue 3,2:1) */
  --green: #00B85C;
  --green-hover: #00A250;
  --green-soft: #E3F7EC;
  --green-ink: #00803F;
  --red: #FF3D4F;
  --red-soft: #FFE9EB;
  --red-ink: #D21F33;
  --violet: #8C5CF6;
  --violet-soft: #F1EBFF;
  --violet-ink: #6B3FD9;
  --amber: #FF9F0A;
  --amber-soft: #FFF2DC;
  --amber-ink: #B86A00;
  --lime: #8CCB2B;
  --lime-soft: #EEF8DF;
  --lime-ink: #5E9A10;
  --cyan: #14B8D4;
  --cyan-soft: #E0F6FA;
  --cyan-ink: #0B7F94;
  --pink: #F2509A;
  --pink-soft: #FDE8F1;

  /* Источники заявок */
  --src-avito: var(--blue);
  --src-site: var(--violet);
  --src-call: var(--green);
  --src-tg: #2AABEE;
  --src-max: #6C5CFF;
  --src-ref: var(--amber);

  /* Фирменные детали: перелив из логотипа — только ИИ, автоответ, биддер; срез штриха F */
  --ribbon: linear-gradient(100deg, #4FA3FF 0%, #8A7BFF 52%, #E59BFF 100%);
  --ribbon-ink: #6B4FE0;
  --cut: 11px;

  /* Выбранный фильтр — тёмная «таблетка»; тёмные плашки (тосты, массовые действия) */
  --chip-on: #141414;
  --chip-on-ink: #FFFFFF;
  --night: #1C1C1E;
  --night-link: #6CC3FF;
  --money-grad: linear-gradient(160deg, #0F1B2D 0%, #13253F 60%, #0A3A6B 100%);
  /* Тарифы: чем старше, тем «дороже» карточка. Рост — зелёный, премиум — тёмная денежная */
  --plan-growth-bg: linear-gradient(180deg, rgba(0, 184, 92, .10) 0%, var(--surface) 42%);
  --plan-premium-bg: var(--money-grad);
  --plan-premium-ink: #FFFFFF;
  --plan-premium-ink-2: rgba(255, 255, 255, .72);
  --plan-premium-fill: rgba(255, 255, 255, .09);
  --plan-premium-line: rgba(255, 255, 255, .16);

  /* Радиусы: 8 плашки, 10–12 кнопки и поля, 16 сделки, 20 разделы, 28 крупные панели */
  --r-xs: 8px;
  --r-sm: 10px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-pill: 999px;

  /* Высоты контролов */
  --h-sm: 32px;
  --h-md: 40px;
  --h-lg: 48px;

  /* Тени: почти незаметные, карточки отделяет фон */
  --sh-0: 0 0 0 0 transparent;
  --sh-1: 0 1px 2px rgba(20, 20, 20, .04);
  --sh-2: 0 1px 2px rgba(20, 20, 20, .04), 0 8px 24px -12px rgba(20, 20, 20, .12);
  --sh-3: 0 2px 6px rgba(20, 20, 20, .05), 0 24px 56px -20px rgba(20, 20, 20, .22);
  --ring: 0 0 0 3px rgba(10, 147, 255, .28);

  /* Шрифт: Manrope, 500 — текст, 600 — кнопки, заголовки, имена и деньги. Жирнее 600 не бывает */
  --font: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --fw-text: 500;
  --fw-strong: 600;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-2xl: 26px;
  --fs-3xl: 34px;

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

  /* Движение */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --t-fast: 120ms;
  --t-mid: 220ms;
  --t-slow: 320ms;

  /* Слои: одна шкала на весь продукт */
  --z-sticky: 20;
  --z-sidebar: 30;
  --z-bulk: 40;
  --z-tabbar: 45;
  --z-sheet: 50;
  --z-drawer: 60;
  --z-dropdown: 70;
  --z-modal: 80;
  --z-modal-menu: 85;
  --z-palette: 90;
  --z-toast: 100;
  --z-tooltip: 110;
  --backdrop: rgba(15, 15, 16, .40);

  /* Каркас */
  --sidebar: 252px;
  --sidebar-mini: 76px;
  --topbar: 64px;
  --page-x: 28px;
  --max: 1440px;
}

/* --------------------------------------------------------------------------
   2. Тёмная тема: html[data-theme="dark"], те же имена
   -------------------------------------------------------------------------- */
html[data-theme="dark"] {
  --canvas: #0F0F10;
  --surface: #19191B;
  --surface-2: #1E1E21;
  --fill: #242427;
  --fill-hover: #2C2C30;
  --fill-strong: #34343A;
  --line: #26262A;
  --line-strong: #34343A;
  --ink: #F4F4F2;
  --ink-2: #B4B3AE;
  --ink-3: #807F7A;
  --ink-inverse: #141414;
  --blue: #3AA8FF;
  --blue-hover: #5CB8FF;
  --blue-soft: rgba(58, 168, 255, .14);
  --blue-ink: #8CCBFF;
  --blue-strong: #1F8BEF;
  --green: #1FCC75;
  --green-hover: #3AD98A;
  --green-soft: rgba(31, 204, 117, .14);
  --green-ink: #6FE3A6;
  --red: #FF5866;
  --red-soft: rgba(255, 88, 102, .15);
  --red-ink: #FF9AA3;
  --violet: #A07CFF;
  --violet-soft: rgba(160, 124, 255, .16);
  --violet-ink: #C7B3FF;
  --amber: #FFB340;
  --amber-soft: rgba(255, 179, 64, .15);
  --amber-ink: #FFCB7A;
  --lime-soft: rgba(140, 203, 43, .15);
  --lime-ink: #B5E26A;
  --cyan-soft: rgba(20, 184, 212, .15);
  --cyan-ink: #7FDCEC;
  --pink-soft: rgba(242, 80, 154, .15);
  --ribbon: linear-gradient(100deg, #66B2FF 0%, #A08FFF 52%, #F0B2FF 100%);
  --ribbon-ink: #C2B2FF;
  --chip-on: #F4F4F2;
  --chip-on-ink: #141414;
  --night: #2A2A2E;
  --money-grad: linear-gradient(160deg, #13233A 0%, #102F55 100%);
  --plan-growth-bg: linear-gradient(180deg, rgba(48, 209, 120, .14) 0%, var(--surface) 46%);
  --plan-premium-line: rgba(255, 255, 255, .18);
  --sh-1: 0 1px 2px rgba(0, 0, 0, .3);
  --sh-2: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 28px -14px rgba(0, 0, 0, .6);
  --sh-3: 0 2px 6px rgba(0, 0, 0, .35), 0 28px 60px -20px rgba(0, 0, 0, .7);
  --ring: 0 0 0 3px rgba(58, 168, 255, .32);
  --backdrop: rgba(0, 0, 0, .55);
  color-scheme: dark;
}

@media (max-width: 760px) {
  :root { --topbar: 60px; --page-x: 16px; }
}

/* --------------------------------------------------------------------------
   3. Старые имена → токены. Только ссылки, своих значений здесь нет.
   -------------------------------------------------------------------------- */
:root {
  /* v12 (crm-tokens.css) */
  --bg: var(--canvas);
  --bg-deep: var(--fill);
  --surface-soft: var(--surface-2);
  --surface-muted: var(--fill);
  --surface-strong: var(--surface);
  --text: var(--ink);
  --text-2: var(--ink-2);
  --text-3: var(--ink-3);
  --accent: var(--blue);
  --accent-2: var(--blue-hover);
  --accent-soft: var(--blue-soft);
  --accent-soft-2: color-mix(in srgb, var(--blue) 6%, transparent);
  --accent-line: color-mix(in srgb, var(--blue) 28%, transparent);
  --navy: var(--chip-on);
  --navy-2: var(--night);
  --on-accent: #FFFFFF;
  --success: var(--green-ink);
  --success-bg: var(--green-soft);
  --warning: var(--amber-ink);
  --warning-bg: var(--amber-soft);
  --danger: var(--red-ink);
  --danger-bg: var(--red-soft);
  --teal: var(--green);
  --indigo: var(--blue);
  --glass: var(--surface);
  --glass-strong: var(--surface);
  --glass-edge: transparent;
  --glass-highlight: transparent;
  --shadow-card: var(--sh-1);
  --shadow-soft: var(--sh-2);
  --shadow-float: var(--sh-3);
  --shadow-blue: var(--sh-0);
  --e1: var(--sh-1);
  --e2: var(--sh-2);
  --e3: var(--sh-3);
  --e4: var(--sh-3);
  --hi: var(--sh-0);
  --radius-sm: var(--r-sm);
  --radius-md: var(--r-md);
  --radius-lg: var(--r-lg);
  --radius-xl: var(--r-xl);
  --radius-2xl: var(--r-2xl);
  --radius-shell: var(--r-2xl);
  --radius-pill: var(--r-pill);
  --control: var(--h-md);
  --d1: var(--t-fast);
  --d2: var(--t-mid);
  --d3: var(--t-slow);

  /* app.css */
  --blue-dark: var(--blue-hover);
  --border: var(--line);
  --border-soft: var(--line);
  --muted: var(--ink-3);
  --radius: var(--r-xl);
  --control-h: var(--h-md);
  --control-radius: var(--r-md);
  --orange: var(--amber-ink);
  --shadow: var(--sh-1);
  --shadow-sm: var(--sh-1);
  --shadow-md: var(--sh-2);
  --shadow-lg: var(--sh-3);
  --font-ui: var(--font);
  --title-weight: 600;
  --sidebar-width: var(--sidebar);
  --blur: 0px;
  --avito-blue: var(--blue);
  --avito-green: var(--green);
  --avito-bg: var(--canvas);
  --avito-border: var(--line);
  --avito-text: var(--ink);
  --avito-text-muted: var(--ink-3);

  /* foundation.css и app.css: --fc-* */
  --fc-bg: var(--canvas);
  --fc-bg-canvas: var(--canvas);
  --fc-bg-surface: var(--surface);
  --fc-bg-surface-secondary: var(--surface-2);
  --fc-bg-surface-elevated: var(--surface);
  --fc-bg-surface-hover: var(--surface-2);
  --fc-bg-surface-active: var(--fill);
  --fc-bg-surface-selected: var(--blue-soft);
  --fc-bg-overlay: var(--backdrop);
  --fc-surface: var(--surface);
  --fc-surface-muted: var(--surface-2);
  --fc-text-primary: var(--ink);
  --fc-text-secondary: var(--ink-2);
  --fc-text-muted: var(--ink-3);
  --fc-text-inverse: var(--ink-inverse);
  --fc-ink: var(--ink);
  --fc-muted: var(--ink-2);
  --fc-subtle: var(--ink-3);
  --fc-border-subtle: var(--line);
  --fc-border-light: var(--line);
  --fc-border-strong: var(--line-strong);
  --fc-border-focus: var(--blue);
  --fc-line: var(--line);
  --fc-line-strong: var(--line-strong);
  --fc-accent-primary: var(--blue);
  --fc-accent-hover: var(--blue-hover);
  --fc-accent-subtle: var(--blue-soft);
  --fc-accent-focus: color-mix(in srgb, var(--blue) 28%, transparent);
  --fc-brand: var(--blue);
  --fc-brand-strong: var(--blue-hover);
  --fc-brand-soft: var(--blue-soft);
  --fc-status-success: var(--green-ink);
  --fc-status-success-bg: var(--green-soft);
  --fc-status-warning: var(--amber-ink);
  --fc-status-warning-bg: var(--amber-soft);
  --fc-status-danger: var(--red-ink);
  --fc-status-danger-bg: var(--red-soft);
  --fc-status-info: var(--blue-ink);
  --fc-status-info-bg: var(--blue-soft);
  --fc-text-xs: var(--fs-xs);
  --fc-text-sm: var(--fs-sm);
  --fc-text-base: var(--fs-md);
  --fc-text-md: var(--fs-lg);
  --fc-text-lg: 18px;
  --fc-text-xl: var(--fs-2xl);
  --fc-text-xxl: 30px;
  --fc-font-regular: 500;
  --fc-font-medium: 500;
  --fc-font-semibold: 600;
  --fc-font-bold: 600;
  --fc-space-1: var(--sp-1);
  --fc-space-2: var(--sp-2);
  --fc-space-3: var(--sp-3);
  --fc-space-4: var(--sp-4);
  --fc-space-5: var(--sp-5);
  --fc-space-6: var(--sp-6);
  --fc-space-8: var(--sp-8);
  --fc-radius-xs: var(--r-xs);
  --fc-radius-sm: var(--r-sm);
  --fc-radius-md: var(--r-md);
  --fc-radius-lg: var(--r-lg);
  --fc-radius-xl: var(--r-xl);
  --fc-radius-full: var(--r-pill);
  --fc-shadow-sm: var(--sh-1);
  --fc-shadow-md: var(--sh-2);
  --fc-shadow-lg: var(--sh-3);
  --fc-shadow-overlay: var(--sh-3);
  --fc-control-h: var(--h-md);
  --fc-control-height: var(--h-md);
  --fc-motion: var(--t-fast) var(--ease);
  --fc-motion-fast: var(--t-fast) var(--ease);
  --fc-motion-standard: var(--t-mid) var(--ease);
  --fc-sidebar: var(--sidebar);
}

@media (pointer: coarse) {
  :root { --control: 44px; --control-h: 44px; --fc-control-height: 44px; --fc-control-h: 44px; }
}