/* =============================================================================
 * Pllato Suite — Design Tokens
 * =============================================================================
 *
 * Единый источник правды для брендинга и UI-примитивов. Подключается ПЕРЕД
 * style.css в index.html — старые переменные (--ac/--bg/--t1/--r/--fd/...)
 * в конце файла переопределены как алиасы на новые семантические токены.
 *
 * Принципы:
 *   - Бренд: #ffc700 жёлтый + чёрно-серая палитра.
 *   - Жёлтый — для бренд-маркеров (header, active sidebar, focus, бренд-чипы),
 *     НЕ для primary action на белом фоне (контраст < 1.5 — провал WCAG).
 *   - В light theme primary action = чёрный (#1a1a1a) → высокий контраст.
 *   - В dark theme primary action = жёлтый (на тёмном фоне работает идеально).
 *   - Status warning перенесён в #d99500 (тёплый янтарь), чтобы не конфликтовать
 *     с brand #ffc700 — иначе предупреждения и бренд сливаются.
 *
 * Все компоненты CRM должны использовать ТОЛЬКО переменные отсюда.
 * Никаких хардкодных hex-кодов в новом коде.
 * ========================================================================== */

:root {
  /* ─── Бренд ───────────────────────────────────────────────────────────── */
  /* Brand: Bitrix-style sapphire blue. Раньше был cyan #2fc6f6 — заказчик
     сказал «слишком голубые кнопки, сделай более синий». Перешли на
     насыщенный синий #2178cb (как стандартный Bitrix24 primary). */
  --brand-primary:           #2178cb;            /* Bitrix sapphire-blue */
  --brand-primary-hover:     #1a66b3;
  --brand-on-primary:        #ffffff;
  --brand-glow:              rgba(33, 120, 203, .32);
  --brand-accent-red:        #c34b47;            /* кирпичный — для бренд-акцентов, НЕ error */

  /* ─── Фон (light by default) ──────────────────────────────────────────── */
  /* После калибровки: canvas чуть темнее (заметный серый, не «выжигает»),
     карточки остаются белыми → возникает депт-rhythm canvas / card. */
  --bg-base:                 #ebeef2;            /* основной канвас (тёплый серый) */
  --bg-surface:              #ffffff;            /* карточки, таблицы */
  --bg-elevated:             #ffffff;            /* модалки, поповеры */
  --bg-subtle:               #e1e5eb;            /* зебра-полосы, group headers */
  --bg-hover:                #dde1e7;            /* row hover */
  --bg-active:               #d3d8df;            /* selected row, pressed */
  --bg-disabled:             #e8ebf0;
  /* Внутри карточек hover чуть отличный от canvas hover */
  --bg-surface-hover:        #f6f7f9;
  --bg-surface-active:       #eef0f3;

  /* ─── Текст ───────────────────────────────────────────────────────────── */
  /* Чёрный #1a1a1a давал слишком «строгий» контраст. Смягчил до #1f2024
     (синхронно с action-primary) — текст плотный, но не «вырубающий». */
  --text-primary:            #1f2024;
  --text-secondary:          #3f4248;
  --text-muted:              #5e6470;            /* было #6f7280 — темнее → читаемее */
  --text-disabled:           #a8acb4;
  --text-on-dark:            #f5f5f7;
  --text-inverse:            #ffffff;

  /* ─── Бордеры и разделители ───────────────────────────────────────────── */
  /* Усилены, чтобы группы блоков визуально разделялись на canvas. */
  --border-default:          #d8dce1;
  --border-strong:           #b8bcc4;
  --border-subtle:           #e4e7ec;
  --border-focus:            #2178cb;
  --border-focus-shadow:     rgba(33, 120, 203, .28);

  /* ─── Primary action (CTA) ────────────────────────────────────────────── */
  /* Bitrix-style: насыщенный синий CTA. Раньше был cyan #2fc6f6, но клиент
     сказал «слишком голубые». Перешли на sapphire-blue — как у Bitrix24. */
  --action-primary:          #2178cb;
  --action-primary-hover:    #1a66b3;
  --action-primary-active:   #155696;
  --action-on-primary:       #ffffff;
  --action-primary-disabled: #9bb8d8;

  /* ─── Rail (левая панель модулей) ─────────────────────────────────────── */
  /* Bitrix-стиль: тёмно-синий navy rail с белыми иконками. Активный пункт —
     sapphire-blue тинт + белая иконка + синий индикатор слева. В обеих темах
     одинаковый rail (как у Bitrix). */
  --rail-bg:                 #1e2a3a;            /* slate-navy */
  --rail-bg-hover:           #283648;
  --rail-text:               #b8c4d4;            /* приглушённый светло-серый */
  --rail-text-active:        #ffffff;
  --rail-active-bg:          rgba(33, 120, 203, .28);
  --rail-active-bg-hover:    rgba(33, 120, 203, .38);
  --rail-border:             #2a3648;
  --rail-divider:            rgba(255, 255, 255, .08);

  /* Secondary action — серая прозрачная (для отмен, второстепенных) */
  --action-secondary:        #ffffff;
  --action-secondary-hover:  #f1f2f5;
  --action-secondary-border: #d1d5db;
  --action-on-secondary:     #1a1a1a;

  /* Ghost action — без фона, только текст */
  --action-ghost-hover:      #f1f2f5;

  /* ─── Статусы ─────────────────────────────────────────────────────────── */
  --status-success:          #16a34a;            /* было #2e9e5b — слишком тусклый рядом с warning/danger */
  --status-success-bg:       rgba(22, 163, 74, .10);
  --status-success-border:   rgba(22, 163, 74, .35);

  --status-warning:          #d99500;            /* темнее brand-yellow */
  --status-warning-bg:       rgba(217, 149, 0, .12);
  --status-warning-border:   rgba(217, 149, 0, .35);

  --status-danger:           #c34b47;            /* фирменный красный */
  --status-danger-bg:        rgba(195, 75, 71, .10);
  --status-danger-border:    rgba(195, 75, 71, .35);

  --status-info:             #3a7fc1;
  --status-info-bg:          rgba(58, 127, 193, .10);
  --status-info-border:      rgba(58, 127, 193, .35);

  --status-neutral:          #6f7280;
  --status-neutral-bg:       rgba(111, 114, 128, .10);

  /* ─── Радиус ──────────────────────────────────────────────────────────── */
  /* Калибровка: 4px давал «острый» industrial feel — некомфортно для CRM,
     который смотрят 8h/день. Поднял default до 6px. 4px остался для
     чипов/badges (где радиус должен быть меньше высоты). */
  --radius-xs:               3px;                /* чипы, тэги */
  --radius-sm:               4px;                /* badges, small pills */
  --radius-md:               6px;                /* инпуты, кнопки, карточки */
  --radius-lg:               10px;               /* модалки, крупные блоки */
  --radius-pill:             9999px;             /* counter-badges */

  /* ─── Размеры контролов (по промту: 28 / 36 / 44) ─────────────────────── */
  --size-control-sm:         28px;
  --size-control-md:         36px;
  --size-control-lg:         44px;

  /* Padding для контролов (горизонтальный) */
  --padding-control-sm:      8px;
  --padding-control-md:      12px;
  --padding-control-lg:      16px;

  /* ─── Шрифты ──────────────────────────────────────────────────────────── */
  --font-family-body:        'Roboto', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Tahoma, sans-serif;
  --font-family-heading:     'Roboto Condensed', 'Roboto', system-ui, sans-serif;
  --font-family-mono:        ui-monospace, 'SF Mono', Consolas, 'Liberation Mono', monospace;

  --font-size-xs:            11px;   --line-height-xs:   16px;
  --font-size-sm:            12px;   --line-height-sm:   16px;
  --font-size-base:          14px;   --line-height-base: 20px;
  --font-size-md:            15px;   --line-height-md:   22px;
  --font-size-lg:            17px;   --line-height-lg:   24px;
  --font-size-xl:            20px;   --line-height-xl:   28px;
  --font-size-2xl:           24px;   --line-height-2xl:  32px;
  --font-size-3xl:           30px;   --line-height-3xl:  38px;

  --font-weight-regular:     400;
  --font-weight-medium:      500;
  --font-weight-semibold:    600;
  --font-weight-bold:        700;

  /* ─── Тени ────────────────────────────────────────────────────────────── */
  /* Двух-слойные тени (тонкий sharp + мягкий ambient) — карточки чётко
     приподнимаются над canvas, не «сливаются с фоном». */
  --shadow-xs:               0 1px 2px rgba(15, 17, 24, .06);
  --shadow-sm:               0 1px 2px rgba(15, 17, 24, .04), 0 2px 6px rgba(15, 17, 24, .06);
  --shadow-card:             0 1px 3px rgba(15, 17, 24, .05), 0 4px 12px rgba(15, 17, 24, .07);
  --shadow-card-hover:       0 2px 4px rgba(15, 17, 24, .06), 0 8px 20px rgba(15, 17, 24, .10);
  --shadow-modal:            0 4px 12px rgba(15, 17, 24, .12), 0 16px 48px rgba(15, 17, 24, .20);
  --shadow-popover:          0 2px 6px rgba(15, 17, 24, .08), 0 8px 24px rgba(15, 17, 24, .14);
  --shadow-cta:              0 4px 12px rgba(33, 120, 203, .32);
  --shadow-focus:            0 0 0 3px rgba(33, 120, 203, .28);

  /* ─── Z-index ─────────────────────────────────────────────────────────── */
  --z-dropdown:              100;
  --z-sticky:                200;
  --z-popover:               300;
  --z-modal-backdrop:        400;
  --z-modal:                 500;
  --z-toast:                 600;
  --z-tooltip:               700;

  /* ─── Анимации ────────────────────────────────────────────────────────── */
  --transition-fast:         120ms ease;
  --transition-base:         180ms ease;
  --transition-slow:         280ms ease;

  /* ─── Layout (унаследовано из style.css) ──────────────────────────────── */
  --rail-w:                  64px;
  --rail-expanded-w:         220px;
  --second-panel-w:          280px;

  /* =====================================================================
   * ALIASES — старые короткие имена (--ac/--bg/--t1/--r/--fd/...)
   * остаются для совместимости с 7400+ строк style.css.
   * При написании нового кода используй семантические имена выше.
   * ===================================================================== */

  /* Фоны */
  --bg:                      var(--bg-base);
  --bg2:                     var(--bg-surface);
  --bg3:                     var(--bg-subtle);
  --bg4:                     var(--bg-hover);

  /* Бордеры */
  --b1:                      var(--border-default);
  --b2:                      var(--border-strong);

  /* Текст */
  --t1:                      var(--text-primary);
  --t2:                      var(--text-secondary);
  --t3:                      var(--text-muted);

  /* Action / accent — Bitrix-cyan. Используется в legacy селекторах
     для аватарок, mention-чипов, message bubbles, view-toggle active. */
  --ac:                      var(--action-primary);
  --ac2:                     var(--action-primary-hover);
  /* Sapphire-blue тинт для highlights (role-badge.admin, reaction.mine, selected). */
  --acbg:                    rgba(33, 120, 203, .14);
  --acb:                     rgba(33, 120, 203, .40);

  /* Status */
  --gn:                      var(--status-success);
  --gnbg:                    var(--status-success-bg);
  --am:                      var(--status-warning);
  --ambg:                    var(--status-warning-bg);
  --rd:                      var(--status-danger);
  --rdbg:                    var(--status-danger-bg);
  --tl:                      var(--status-info);
  --tlbg:                    var(--status-info-bg);

  /* Радиус (старые имена → новые) */
  --r:                       var(--radius-md);
  --rl:                      var(--radius-lg);

  /* Шрифты */
  --fd:                      var(--font-family-body);
  --fb:                      var(--font-family-body);

  /* Тень */
  --shadow:                  var(--shadow-card);
}

/* ===========================================================================
 * DARK THEME — primary action становится ЖЁЛТЫМ (на тёмном фоне работает)
 * =========================================================================*/
:root[data-theme="dark"] {
  --bg-base:                 #0f0f10;
  --bg-surface:              #1a1a1d;
  --bg-elevated:             #222226;
  --bg-subtle:               #161618;
  --bg-hover:                #25252a;
  --bg-active:               #2e2e34;
  --bg-disabled:             #1f1f22;
  /* Hover/active внутри карточек (.users-table tr.row:hover, .deals-list-row:hover, .dc-tab:hover и т.п.).
     В light они были #f6f7f9 / #eef0f3 — на тёмном фоне давали почти белую
     подсветку (юзеры жалуются: «не видно ничего, белая подсветка»).
     В dark делаем чуть светлее чем bg-surface — мягкий хайлайт. */
  --bg-surface-hover:        #25252a;
  --bg-surface-active:       #2e2e34;

  --text-primary:            #f5f5f7;
  --text-secondary:          #b5b5be;
  --text-muted:              #8a8a92;
  --text-disabled:           #4e4e54;
  --text-on-dark:            #f5f5f7;
  --text-inverse:            #1a1a1a;

  --border-default:          #2e2e34;
  --border-strong:           #3a3a42;
  --border-subtle:           #25252a;

  /* DARK theme — Bitrix-style: sapphire-blue CTA как и в light. Светлее
     оттенок чтобы лучше читался на тёмном фоне. */
  --action-primary:          #4a9eea;
  --action-primary-hover:    #2178cb;
  --action-primary-active:   #1a66b3;
  --action-on-primary:       #ffffff;
  --action-primary-disabled: #2a4865;

  /* Brand-маркеры (focus, active indicators).
     В тёмной теме sapphire-blue светлее чтобы читался на тёмном bg. */
  --brand-primary:           #4a9eea;
  --brand-primary-hover:     #2178cb;
  --brand-on-primary:        #ffffff;
  --brand-glow:              rgba(74, 158, 234, .28);
  --border-focus:            #4a9eea;
  --border-focus-shadow:     rgba(74, 158, 234, .25);
  --shadow-focus:            0 0 0 3px rgba(74, 158, 234, .28);
  --shadow-cta:              0 4px 12px rgba(74, 158, 234, .32);

  /* surface hover/active в dark */
  --bg-surface-hover:        #222226;
  --bg-surface-active:       #2e2e34;

  --action-secondary:        #25252a;
  --action-secondary-hover:  #2e2e34;
  --action-secondary-border: #3a3a42;
  --action-on-secondary:     #f5f5f7;

  --action-ghost-hover:      #25252a;

  --status-success:          #22c55e;            /* было #4caf75 — слишком тусклый */
  --status-success-bg:       rgba(34, 197, 94, .16);
  --status-success-border:   rgba(34, 197, 94, .40);

  --status-warning:          #e9a826;
  --status-warning-bg:       rgba(233, 168, 38, .16);
  --status-warning-border:   rgba(233, 168, 38, .40);

  --status-danger:           #d96460;
  --status-danger-bg:        rgba(217, 100, 96, .14);
  --status-danger-border:    rgba(217, 100, 96, .40);

  --status-info:             #5a9bd8;
  --status-info-bg:          rgba(90, 155, 216, .14);
  --status-info-border:      rgba(90, 155, 216, .40);

  --status-neutral:          #8a8a92;
  --status-neutral-bg:       rgba(138, 138, 146, .14);

  --shadow-xs:               0 1px 2px rgba(0, 0, 0, .40);
  --shadow-sm:               0 2px 6px rgba(0, 0, 0, .45);
  --shadow-card:             0 4px 16px rgba(0, 0, 0, .50);
  --shadow-card-hover:       0 8px 24px rgba(0, 0, 0, .60);
  --shadow-modal:            0 12px 40px rgba(0, 0, 0, .70);
  --shadow-popover:          0 6px 20px rgba(0, 0, 0, .60);
  /* shadow-cta + shadow-focus уже переопределены в новом янтарном выше */

  /* Aliases override для dark.
     --acbg/--acb — янтарное свечение для активных индикаторов (focus rings).
     --ac/--ac2 — НАМЕРЕННО оставляем тёмными чтобы legacy код с
     'background: var(--ac); color: white;' оставался читаемым в dark theme
     (аватарки, message bubbles, view-toggle active, mention chips, etc).
     Новые компоненты используют var(--action-primary) напрямую — там
     остаётся светлый CTA-стиль. */
  --ac:                      #2b2e36;
  --ac2:                     #3a3e48;
  --acbg:                    rgba(74, 158, 234, .14);
  --acb:                     rgba(74, 158, 234, .40);
}