/* ============================================================
   COBRA UI Kit — переменные оформления
   ------------------------------------------------------------
   Блок 1 — зеркало ядра (ai-cobra/frontend/src/index.css).
     Нужен, чтобы модуль выглядел правильно при автономной
     разработке, когда оболочка ещё ничего не прислала.
     ⚠️ Значения синхронизировать с ядром при его изменении.

   Блок 2 — дополнения кита.
     Того, чего в ядре нет: шкалы отступов, слоёв, теней,
     размеров элементов управления. Префикс --ck-.

   Задумано: когда модуль работает внутри COBRA, оболочка присылает
   актуальные значения блока 1 в сообщении cobra:init и обновляет
   их при cobra:theme. ⚠️ В ядре этот протокол пока НЕ реализован
   (postMessage в src отсутствует) — сейчас тема управляется только
   атрибутом data-theme.
   ============================================================ */

/* ── Блок 1. Зеркало ядра: светлая тёплая тема (по умолчанию) ── */
:root {
  --bg: #efeee9;
  --surface: #fbfbf9;
  --surface-2: #f7f6f3;
  --surface-3: #f2f1ed;
  --border: #e7e5df;
  --text: #2c2a27;
  --text-muted: #8b887f;
  --text-dim: #a3a09a;
  --accent: #0e9d7d;
  --accent-bg: #e7f5f0;
  --accent-border: #bfe6da;
  --hover-bg: #f7f6f3;
  --hover-bg-strong: #e9e7e0;
  --drop-bg: rgba(14, 157, 125, 0.14);
  --danger: #c25a45;
  --danger-bg: #f8e7e1;
  --success: #0e9d7d;
  --warning: #b3791f;
  --warning-bg: #fbf0da;
  --card: #ffffff;

  --font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: ui-monospace, 'SF Mono', Consolas, monospace;
  --radius: 14px;
  --radius-sm: 10px;
  --transition: 160ms ease;

  color-scheme: light;
}

/* ── Тёмная тема ── */
[data-theme="dark"] {
  --bg: #202123;
  --surface: #171717;
  --surface-2: #212224;
  --surface-3: #2a2b2e;
  --border: #2f3136;
  --text: #ececec;
  --text-muted: #a1a1aa;
  --text-dim: #6b7280;
  --accent: #10a37f;
  --accent-bg: #153b34;
  --accent-border: #1f5b4f;
  --hover-bg: #232427;
  --hover-bg-strong: #2b2d31;
  --drop-bg: rgba(16, 163, 127, 0.16);
  --danger: #ef4444;
  --danger-bg: #3a1f1a;
  --success: #10a37f;
  --warning: #f59e0b;
  --warning-bg: #3a2f15;
  --card: #212224;
  color-scheme: dark;
}

/* ── Системная тема: тёмная ОС и не задан атрибут ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) {
    --bg: #202123;
    --surface: #171717;
    --surface-2: #212224;
    --surface-3: #2a2b2e;
    --border: #2f3136;
    --text: #ececec;
    --text-muted: #a1a1aa;
    --text-dim: #6b7280;
    --accent: #10a37f;
    --accent-bg: #153b34;
    --accent-border: #1f5b4f;
    --hover-bg: #232427;
    --hover-bg-strong: #2b2d31;
    --drop-bg: rgba(16, 163, 127, 0.16);
    --danger: #ef4444;
    --danger-bg: #3a1f1a;
    --success: #10a37f;
    --warning: #f59e0b;
    --warning-bg: #3a2f15;
    --card: #212224;
    color-scheme: dark;
  }
}

[data-theme="light"] { color-scheme: light; }

/* ── Блок 2. Дополнения кита ──────────────────────────────── */
:root {
  /* Отступы. Шаг 2px — выведен из фактического ряда ядра
     (8/10/6/12/4 покрывают 90% случаев). */
  --ck-space-1: 2px;
  --ck-space-2: 4px;
  --ck-space-3: 6px;
  --ck-space-4: 8px;
  --ck-space-5: 10px;
  --ck-space-6: 12px;
  --ck-space-7: 16px;
  --ck-space-8: 20px;
  --ck-space-9: 24px;
  --ck-space-10: 32px;

  /* Кегль. Из подсчёта по ядру: 13px — основной для элементов
     управления, 12px — вторичный текст, 11px — подписи. */
  --ck-text-xs: 11px;
  --ck-text-sm: 12px;
  --ck-text-md: 13px;
  --ck-text-lg: 14px;
  --ck-text-xl: 15px;
  --ck-text-2xl: 17px;

  --ck-weight-normal: 400;
  --ck-weight-medium: 500;
  --ck-weight-semibold: 600;
  --ck-weight-bold: 700;

  /* Высота элементов управления. В ядре не зафиксирована —
     кнопки и поля разъезжаются на 2–4px. Здесь закреплена. */
  --ck-control-sm: 28px;
  --ck-control-md: 34px;
  --ck-control-lg: 40px;

  /* Скругления. Ядро использует var(--radius) / var(--radius-sm)
     и «пилюлю»; ничего сверх этого кит не вводит. */
  --ck-radius-pill: 999px;

  /* Тени. В ядре 12 разных значений; здесь три ступени. */
  --ck-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --ck-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.14);
  --ck-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.18);

  /* Слои внутри окна модуля. Изоляция окна означает, что
     эта шкала ни с чем в оболочке не конкурирует. */
  --ck-z-base: 1;
  --ck-z-sticky: 100;
  --ck-z-dropdown: 200;
  --ck-z-backdrop: 300;
  --ck-z-modal: 310;
  --ck-z-toast: 400;

  /* Подложка модального окна. В ядре пять разных прозрачностей;
     взята середина. */
  --ck-backdrop: rgba(0, 0, 0, 0.5);

  --ck-focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}