/* =============================================================================
 * Pllato Suite — Design Tokens
 * =============================================================================
 *
 * Единый источник правды для брендинга и UI-примитивов. Подключается ПЕРЕД
 * style.css в index.html — старые переменные (--ac/--bg/--t1/--r/--fd/...)
 * в конце файла переопределены как алиасы на новые семантические токены.
 *
 * Принципы:
 *   - Бренд (penoblocki.kz): #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-primary:           #ffc700;            /* основной жёлтый ППБ */
  --brand-primary-hover:     #e6b400;
  --brand-on-primary:        #1a1a1a;            /* контраст 12:1 — текст НА жёлтом */
  --brand-glow:              rgba(255, 199, 0, .38);  /* свечение CTA с сайта */
  --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:            #ffc700;
  --border-focus-shadow:     rgba(255, 199, 0, .28);

  /* ─── Primary action (CTA) ────────────────────────────────────────────── */
  /* Тёмно-графитовый вместо чёрного — мягче, профессиональнее. */
  --action-primary:          #1f2024;
  --action-primary-hover:    #2c2e34;            /* slightly lighter (не темнее!) — обычно visual feedback при hover «осветляет» dark кнопку */
  --action-primary-active:   #14151a;
  --action-on-primary:       #ffffff;
  --action-primary-disabled: #b8bcc4;

  /* 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:          #2e9e5b;
  --status-success-bg:       rgba(46, 158, 91, .10);
  --status-success-border:   rgba(46, 158, 91, .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;            /* с сайта penoblocki */
  --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(255, 199, 0, .32);
  --shadow-focus:            0 0 0 3px rgba(255, 199, 0, .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 — в light это тёмно-графитовый. */
  --ac:                      var(--action-primary);
  --ac2:                     var(--action-primary-hover);
  /* acbg раньше .08 — почти невидимо. Поднял до .10 + чуть теплее
     (используется в style.css в active backgrounds, list highlights). */
  --acbg:                    rgba(31, 32, 36, .10);
  --acb:                     rgba(31, 32, 36, .32);

  /* 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;

  --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;

  /* В тёмной теме ЖЁЛТЫЙ становится primary action — контраст с тёмным 14:1 */
  --action-primary:          #ffc700;
  --action-primary-hover:    #ffd633;
  --action-primary-active:   #e6b400;
  --action-on-primary:       #1a1a1a;
  --action-primary-disabled: #4e4e54;

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

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

  --status-success:          #4caf75;
  --status-success-bg:       rgba(76, 175, 117, .14);
  --status-success-border:   rgba(76, 175, 117, .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:              0 4px 12px rgba(255, 199, 0, .42);
  --shadow-focus:            0 0 0 3px rgba(255, 199, 0, .35);

  /* Aliases override (в dark --ac — жёлтый, в light — чёрный) */
  --acbg:                    rgba(255, 199, 0, .14);
  --acb:                     rgba(255, 199, 0, .45);
}