/* ============================================================
   Травиночка — дизайн-токены (v0.14, «Лунная поляна»)
   Единственный источник цветов, типографики, отступов, теней.
   Палитра в oklch: ночь (165 — холодная зелёная тьма),
   мох и трава (148–158), светлячки (112 — тёплое свечение),
   луна (105–110 — тёплые почти-белые).
   Имена токенов v0.13 сохранены — обратная совместимость.
   ============================================================ */

:root {
  /* --- Ночь: фоновые слои (от тьмы к свету) --- */

  --night-950: oklch(0.145 0.014 170);
  --night-900: oklch(0.175 0.017 168);
  --night-850: oklch(0.195 0.018 167);
  --night-800: oklch(0.22 0.02 166);
  --night-700: oklch(0.265 0.022 164);
  --night-600: oklch(0.315 0.025 162);

  /* --- Мох: брендовые зелёные --- */

  --moss-900: oklch(0.32 0.05 158);
  --moss-800: oklch(0.385 0.065 156);
  --moss-700: oklch(0.47 0.085 153);
  --moss-600: oklch(0.565 0.1 150);
  --moss-500: oklch(0.65 0.115 148);

  /* --- Трава: светлые акценты --- */

  --grass-400: oklch(0.76 0.1 145);
  --grass-300: oklch(0.83 0.085 143);
  --grass-200: oklch(0.89 0.06 141);

  /* --- Светлячки: тёплое живое свечение --- */

  --firefly-200: oklch(0.92 0.1 110);
  --firefly-300: oklch(0.88 0.13 112);
  --firefly-400: oklch(0.81 0.15 114);
  --firefly-glow: oklch(0.86 0.16 112 / 0.32);
  --firefly-glow-soft: oklch(0.86 0.16 112 / 0.16);

  /* --- Луна: тёплые почти-белые (текст) --- */

  --moon-50: oklch(0.965 0.008 110);
  --moon-100: oklch(0.925 0.013 108);
  --moon-200: oklch(0.85 0.02 112);

  /* --- Совместимость: прежние имена светлых токенов --- */

  --cream-50: var(--moon-50);
  --cream-100: var(--moon-100);
  --cream-200: var(--moon-200);

  /* --- Шалфей: приглушённый текст --- */

  --sage-400: oklch(0.655 0.026 155);
  --sage-500: oklch(0.54 0.022 155);

  /* --- Линии --- */

  --line-600: oklch(0.28 0.022 163);
  --line-500: oklch(0.345 0.026 161);

  /* --- Статусы --- */

  --danger-500: oklch(0.55 0.14 27);
  --danger-400: oklch(0.67 0.15 24);
  --danger-bg: oklch(0.24 0.05 27);
  --warn-500: oklch(0.76 0.125 85);
  --ok-500: oklch(0.73 0.12 155);

  /* --- Семантика поверхностей --- */

  --bg-page: var(--night-900);
  --bg-page-deep: var(--night-950);
  --bg-panel: var(--night-800);
  --bg-raised: var(--night-700);
  --bg-hover: var(--night-600);
  --bg-accent-subtle: var(--moss-800);
  --bg-accent: var(--moss-600);
  --bg-accent-hover: var(--moss-500);
  /* Поля ввода: полупрозрачная ночь-700 — ранее значение было захардкожено
     в шести местах components.css (v0.16.2). */
  --bg-input: oklch(0.265 0.022 164 / .6);
  --bg-elevated: var(--bg-raised);

  --text-primary: var(--moon-100);
  --text-secondary: var(--moon-200);
  --text-muted: var(--sage-400);
  /* v0.16.2: sage-500 давал лишь 3.44:1 на панели — поднят до sage-400,
     мелкие подписи (slash-меню, футер шпаргалки) читаются лучше. */
  --text-faint: var(--sage-400);
  --text-link: var(--grass-300);

  --border: var(--line-600);
  --border-strong: var(--line-500);
  --border-accent: var(--moss-600);

  /* --- Типографика ---
     Заголовки — Bitter (ночная тетрадь, мягкий антиквенный сериф).
     Тело — Golos Text (современный русский гротеск).
     Оба самописные, woff2, кириллица + латиница. */

  --font-display: "Bitter", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-sans: "Golos Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, "DejaVu Sans Mono", Menlo, monospace;

  /* Фиксированная шкала — интерфейс (чат, формы, сайдбар) */
  --fs-xs: 11.5px;
  --fs-sm: 12.5px;
  --fs-md: 14px;
  --fs-base: 15px;
  --fs-lg: 17px;
  --fs-xl: 21px;
  --fs-2xl: 26px;
  --fs-3xl: 32px;

  /* Жидкая шкала — витрина (лендинг, auth-панель) */
  --fs-hero: clamp(2.15rem, 1.1rem + 4.4vw, 3.9rem);
  --fs-h2: clamp(1.5rem, 1.1rem + 1.7vw, 2.15rem);
  --fs-lead: clamp(1.02rem, 0.95rem + 0.4vw, 1.22rem);

  --lh-tight: 1.24;
  --lh-normal: 1.55;

  /* --- Отступы (шкала 4) --- */

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 28px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 56px;
  --sp-16: 88px;

  /* --- Радиусы --- */

  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-full: 999px;

  /* --- Тени и свечение --- */

  --shadow-1: 0 1px 2px oklch(0 0 0 / 0.4);
  --shadow-2: 0 14px 40px oklch(0.05 0.02 168 / 0.5);
  --shadow-3: 0 24px 64px oklch(0.05 0.02 168 / 0.55);
  --shadow-accent: 0 4px 20px oklch(0.65 0.115 148 / 0.3);
  --shadow-firefly: 0 2px 16px var(--firefly-glow);
  --glow-focus: 0 0 0 3px oklch(0.65 0.115 148 / 0.32);
  --glow-composer: 0 0 0 1px var(--moss-600), 0 0 22px oklch(0.56 0.1 150 / 0.2);

  /* --- Градиенты витрины --- */

  --grad-night: linear-gradient(
    180deg,
    oklch(0.15 0.015 172) 0%,
    var(--night-900) 46%,
    var(--night-900) 100%
  );
  --grad-accent: linear-gradient(135deg, var(--moss-600), var(--moss-500));
  --grad-firefly: radial-gradient(
    closest-side,
    var(--firefly-glow),
    transparent 70%
  );

  /* --- Каркас --- */

  --sidebar-w: 264px;
  --content-w: 1140px;
  /* 292: фактическая потребность строки участников (аватар + имя + XP-бейдж +
     точка + ЛС + 2 жеста ≈ 277px контента + паддинги). При 232 контент не
     помещался и существовал лишь за счёт переполнения grid-трека (v0.14.6). */
  --members-w: 292px;
  --transition-fast: 0.14s cubic-bezier(0.2, 0.7, 0.2, 1);
  --transition-med: 0.22s cubic-bezier(0.2, 0.7, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);

  /* --- Слои --- */

  --z-scene: 0;
  --z-content: 1;
  --z-header: 20;
  --z-backdrop: 40;
  --z-sidebar: 50;
  --z-members: 55;
  --z-toasts: 70;
  --z-skip: 100;
}

/* Отдельно: цветовые схемы для системных контролов */
:root { color-scheme: dark; }

/* ============================================================
   Темы по времени суток (v0.34.0)
   Ночь — база (:root). Утро / день / вечер переопределяют
   семантические токены. Брендовые moss/grass/firefly сохранены.
   ============================================================ */

/* --- Утро: 06:00–11:00 MSK — роса, мягкий холодный рассвет --- */
[data-theme="morning"] {
  color-scheme: light;

  --night-950: oklch(0.92 0.018 150);
  --night-900: oklch(0.88 0.022 148);
  --night-850: oklch(0.84 0.025 147);
  --night-800: oklch(0.80 0.028 146);
  --night-700: oklch(0.74 0.032 145);
  --night-600: oklch(0.68 0.036 144);

  --moss-900: oklch(0.42 0.08 155);
  --moss-800: oklch(0.48 0.09 153);
  --moss-700: oklch(0.55 0.10 151);
  --moss-600: oklch(0.60 0.11 149);
  --moss-500: oklch(0.66 0.12 147);

  --grass-400: oklch(0.62 0.12 145);
  --grass-300: oklch(0.55 0.11 148);
  --grass-200: oklch(0.48 0.09 150);

  --firefly-200: oklch(0.75 0.12 95);
  --firefly-300: oklch(0.70 0.14 98);
  --firefly-400: oklch(0.64 0.15 100);
  --firefly-glow: oklch(0.78 0.14 95 / 0.28);
  --firefly-glow-soft: oklch(0.78 0.14 95 / 0.14);

  --moon-50: oklch(0.22 0.02 160);
  --moon-100: oklch(0.28 0.025 158);
  --moon-200: oklch(0.36 0.03 156);

  --sage-400: oklch(0.48 0.03 155);
  --sage-500: oklch(0.42 0.028 155);

  --line-600: oklch(0.78 0.02 150);
  --line-500: oklch(0.70 0.025 148);

  --danger-bg: oklch(0.92 0.04 25);

  --bg-page: var(--night-900);
  --bg-page-deep: var(--night-950);
  --bg-panel: var(--night-800);
  --bg-raised: var(--night-700);
  --bg-hover: var(--night-600);
  --bg-accent-subtle: oklch(0.82 0.04 150);
  --bg-accent: var(--moss-600);
  --bg-accent-hover: var(--moss-500);
  --bg-input: oklch(0.95 0.015 150 / 0.85);

  --text-primary: var(--moon-100);
  --text-secondary: var(--moon-200);
  --text-muted: var(--sage-400);
  --text-faint: var(--sage-500);
  --text-link: var(--moss-600);

  --border: var(--line-600);
  --border-strong: var(--line-500);
  --border-accent: var(--moss-600);

  --shadow-1: 0 1px 2px oklch(0.4 0.02 150 / 0.12);
  --shadow-2: 0 14px 40px oklch(0.5 0.03 150 / 0.12);
  --shadow-3: 0 24px 64px oklch(0.5 0.03 150 / 0.15);
  --shadow-accent: 0 4px 20px oklch(0.55 0.1 150 / 0.2);
  --glow-focus: 0 0 0 3px oklch(0.55 0.1 150 / 0.28);
  --glow-composer: 0 0 0 1px var(--moss-600), 0 0 22px oklch(0.55 0.1 150 / 0.15);

  --grad-night: linear-gradient(
    180deg,
    oklch(0.94 0.02 145) 0%,
    var(--night-900) 50%,
    var(--night-900) 100%
  );
}

/* --- День: 11:00–17:00 MSK — ясный свет, чистая трава --- */
[data-theme="day"] {
  color-scheme: light;

  --night-950: oklch(0.97 0.012 140);
  --night-900: oklch(0.95 0.015 142);
  --night-850: oklch(0.92 0.018 143);
  --night-800: oklch(0.89 0.022 144);
  --night-700: oklch(0.84 0.028 145);
  --night-600: oklch(0.78 0.032 146);

  --moss-900: oklch(0.38 0.09 155);
  --moss-800: oklch(0.44 0.10 153);
  --moss-700: oklch(0.50 0.11 151);
  --moss-600: oklch(0.56 0.12 149);
  --moss-500: oklch(0.62 0.13 147);

  --grass-400: oklch(0.55 0.13 145);
  --grass-300: oklch(0.48 0.12 148);
  --grass-200: oklch(0.42 0.10 150);

  --firefly-200: oklch(0.72 0.14 95);
  --firefly-300: oklch(0.66 0.15 98);
  --firefly-400: oklch(0.60 0.16 100);
  --firefly-glow: oklch(0.75 0.15 95 / 0.25);
  --firefly-glow-soft: oklch(0.75 0.15 95 / 0.12);

  --moon-50: oklch(0.18 0.02 160);
  --moon-100: oklch(0.24 0.025 158);
  --moon-200: oklch(0.32 0.03 156);

  --sage-400: oklch(0.45 0.03 155);
  --sage-500: oklch(0.40 0.028 155);

  --line-600: oklch(0.85 0.018 145);
  --line-500: oklch(0.76 0.022 146);

  --danger-bg: oklch(0.95 0.035 25);

  --bg-page: var(--night-900);
  --bg-page-deep: var(--night-950);
  --bg-panel: var(--night-800);
  --bg-raised: var(--night-700);
  --bg-hover: var(--night-600);
  --bg-accent-subtle: oklch(0.90 0.035 148);
  --bg-accent: var(--moss-600);
  --bg-accent-hover: var(--moss-500);
  --bg-input: oklch(0.98 0.01 140 / 0.9);

  --text-primary: var(--moon-100);
  --text-secondary: var(--moon-200);
  --text-muted: var(--sage-400);
  --text-faint: var(--sage-500);
  --text-link: var(--moss-600);

  --border: var(--line-600);
  --border-strong: var(--line-500);
  --border-accent: var(--moss-600);

  --shadow-1: 0 1px 2px oklch(0.35 0.02 150 / 0.1);
  --shadow-2: 0 14px 40px oklch(0.4 0.03 150 / 0.1);
  --shadow-3: 0 24px 64px oklch(0.4 0.03 150 / 0.12);
  --shadow-accent: 0 4px 20px oklch(0.5 0.11 150 / 0.18);
  --glow-focus: 0 0 0 3px oklch(0.5 0.11 150 / 0.25);
  --glow-composer: 0 0 0 1px var(--moss-600), 0 0 22px oklch(0.5 0.11 150 / 0.12);

  --grad-night: linear-gradient(
    180deg,
    oklch(0.98 0.012 138) 0%,
    var(--night-900) 50%,
    var(--night-900) 100%
  );
}

/* --- Вечер: 17:00–22:00 MSK — тёплый закат, золотистый мох --- */
[data-theme="evening"] {
  color-scheme: dark;

  --night-950: oklch(0.16 0.02 55);
  --night-900: oklch(0.195 0.025 58);
  --night-850: oklch(0.22 0.028 60);
  --night-800: oklch(0.255 0.032 62);
  --night-700: oklch(0.30 0.036 64);
  --night-600: oklch(0.35 0.04 66);

  --moss-900: oklch(0.34 0.06 120);
  --moss-800: oklch(0.40 0.07 118);
  --moss-700: oklch(0.48 0.09 115);
  --moss-600: oklch(0.56 0.10 112);
  --moss-500: oklch(0.64 0.11 110);

  --grass-400: oklch(0.74 0.11 105);
  --grass-300: oklch(0.80 0.10 108);
  --grass-200: oklch(0.86 0.07 110);

  --firefly-200: oklch(0.90 0.12 85);
  --firefly-300: oklch(0.85 0.14 88);
  --firefly-400: oklch(0.78 0.16 90);
  --firefly-glow: oklch(0.84 0.15 88 / 0.35);
  --firefly-glow-soft: oklch(0.84 0.15 88 / 0.18);

  --moon-50: oklch(0.96 0.015 90);
  --moon-100: oklch(0.92 0.02 92);
  --moon-200: oklch(0.84 0.03 95);

  --sage-400: oklch(0.68 0.03 95);
  --sage-500: oklch(0.56 0.025 95);

  --line-600: oklch(0.30 0.03 65);
  --line-500: oklch(0.37 0.035 68);

  --danger-bg: oklch(0.26 0.05 30);

  --bg-page: var(--night-900);
  --bg-page-deep: var(--night-950);
  --bg-panel: var(--night-800);
  --bg-raised: var(--night-700);
  --bg-hover: var(--night-600);
  --bg-accent-subtle: var(--moss-800);
  --bg-accent: var(--moss-600);
  --bg-accent-hover: var(--moss-500);
  --bg-input: oklch(0.28 0.03 60 / 0.65);

  --text-primary: var(--moon-100);
  --text-secondary: var(--moon-200);
  --text-muted: var(--sage-400);
  --text-faint: var(--sage-400);
  --text-link: var(--grass-300);

  --border: var(--line-600);
  --border-strong: var(--line-500);
  --border-accent: var(--moss-600);

  --shadow-1: 0 1px 2px oklch(0 0 0 / 0.45);
  --shadow-2: 0 14px 40px oklch(0.08 0.03 55 / 0.5);
  --shadow-3: 0 24px 64px oklch(0.08 0.03 55 / 0.55);
  --shadow-accent: 0 4px 20px oklch(0.6 0.12 110 / 0.28);
  --glow-focus: 0 0 0 3px oklch(0.6 0.12 110 / 0.3);
  --glow-composer: 0 0 0 1px var(--moss-600), 0 0 22px oklch(0.55 0.1 112 / 0.22);

  --grad-night: linear-gradient(
    180deg,
    oklch(0.17 0.022 52) 0%,
    var(--night-900) 48%,
    var(--night-900) 100%
  );
}

/* Ночь остаётся дефолтом в :root (22:00–06:00) */
[data-theme="night"] {
  color-scheme: dark;
}

/* --- Критичные переопределения для светлых тем (v0.34.1) ---
   Часть компонентов всё ещё использует абсолютные oklch под ночь.
   Здесь выравниваем самые заметные: свои сообщения, тосты, ghost-кнопки. */

[data-theme="morning"] .msg--own .msg__body,
[data-theme="day"] .msg--own .msg__body {
  background: oklch(0.82 0.04 150);
  border-color: oklch(0.70 0.06 150 / 0.55);
}

[data-theme="morning"] .toast,
[data-theme="day"] .toast {
  background: oklch(0.94 0.02 148 / 0.94);
}

[data-theme="morning"] .btn--ghost:hover:not(:disabled),
[data-theme="day"] .btn--ghost:hover:not(:disabled) {
  background: oklch(0.78 0.03 148 / 0.55);
}

[data-theme="morning"] .btn--primary,
[data-theme="day"] .btn--primary {
  color: oklch(0.98 0.01 140);
}

[data-theme="morning"] .btn--primary:hover:not(:disabled),
[data-theme="day"] .btn--primary:hover:not(:disabled) {
  color: oklch(0.18 0.02 160);
}

/* Переключатель темы в подвале сайдбара */
.theme-switch {
  display: flex;
  gap: 4px;
  margin: 0 0 6px;
  padding: 0;
  list-style: none;
}
.theme-switch__btn {
  flex: 1;
  min-width: 0;
  padding: 5px 2px;
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  background: var(--bg-raised);
  color: var(--text-muted);
  font-size: 10.5px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}
.theme-switch__btn:hover {
  border-color: var(--border-accent);
  color: var(--text-secondary);
}
.theme-switch__btn.is-active {
  border-color: var(--moss-600);
  background: var(--bg-accent-subtle);
  color: var(--text-primary);
}