/* ==========================================================================
   VYSHKA Design Canon tokens v2 (social-week wave 1, visual-system agent).
   Additive layer: defines the canonical scale AND aliases legacy names
   (--bg, --surface, --text, --accent, --radius, --radius-bubble, --border,
   --danger, --shadow, --font) so existing components keep working while
   new code migrates to the v2 scale.
   Canon doc: social-week/w1/visual-system/DESIGN_TOKENS.md
   Rules: no new hex values outside this file; sizes in rem; 4px spacing grid.
   M02 2026-09-14 (messenger-max w5): радиусы выровнены с фактическим рантайм-
   масштабом (eco-week-b: sm12/md16/lg20; xl восстановлен 24 — потребителей
   нет), алиасы сделаны правдивыми (--radius=16=r-md; bubble=18 — намеренный
   средний шаг), добавлены канон line-height (--lh-*) и весов (--w-*),
   тёмная тема дополняет --accent-soft-strong. Ноль визуальной дельты:
   финальные вычисленные значения не изменились (проверено before/after
   computed-аудитом M02). Читайте фактический каскад перед правками.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- Font ---- */
  --font-ui: "Onest", -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;

  /* ---- Type scale (rem, mobile-first, base 16px) ---- */
  --t-display: 1.75rem;   /* 28 screen hero */
  --t-title-1: 1.25rem;   /* 20 screen title */
  --t-title-2: 1.0625rem; /* 17 thread/card title */
  --t-body: 1rem;         /* 16 messages, main UI */
  --t-body-2: 0.9375rem;  /* 15 list names, values */
  --t-caption: 0.8125rem; /* 13 preview, meta, timestamps */
  --t-micro: 0.6875rem;   /* 11 tab labels, badges (floor) */

  /* ---- Line-height canon (M02: фактические значения продукта) ---- */
  --lh-title: 1.2;    /* крупные заголовки экранов */
  --lh-action: 1.35;  /* кнопки/пункты меню/имена в строках */
  --lh-meta: 1.4;     /* подписи, метки, время */
  --lh-body: 1.45;    /* основной текст (body по умолчанию) */
  --lh-relaxed: 1.55; /* абзацы/описания */

  /* ---- Weight canon (M02; Onest переменный 400–800) ---- */
  --w-medium: 500;
  --w-semibold: 600;
  --w-bold: 700;
  /* Легаси-промежуточные 450/650/750 встречаются в чужих слоях (chat-list,
     thread-header); миграция на канон — за владельцами этих файлов. */

  /* ---- Spacing (4px grid) ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;

  /* ---- Radii (runtime scale: eco-week-b задаёт sm/md/lg теми же значениями) ---- */
  --r-xs: 6px; --r-sm: 12px; --r-md: 16px; --r-lg: 20px; --r-xl: 24px; --r-full: 999px;

  /* ---- Light color system ---- */
  --c-bg: #F5F7FB;
  --c-surface: #FFFFFF;
  --c-surface-2: #EEF1F7;
  --c-surface-3: #E2E8F2;
  --c-text: #101828;        /* 17.75 on surface */
  --c-text-2: #475467;      /* 7.69 */
  --c-text-3: #5D6B84;      /* 5.38 — meta only, >=13px */
  --c-border: #E3E8F0;
  --c-border-strong: #CBD5E4;
  --c-accent: #1A56DB;      /* 6.18 — the ONE confident accent */
  --c-accent-strong: #1648B8;
  --c-accent-soft: rgba(26, 86, 219, 0.12);
  --c-on-accent: #FFFFFF;
  --c-success: #0B7D5F;     /* 5.11 */
  --c-success-soft: rgba(11, 125, 95, 0.12);
  --c-warn: #A04906;        /* 6.09 */
  --c-warn-soft: rgba(160, 73, 6, 0.10);
  --c-danger: #C9251B;      /* 5.58 */
  --c-danger-soft: rgba(201, 37, 27, 0.10);
  --c-bubble-out: #DCE8FF;  /* text on it: 14.39 */
  --c-bubble-in: #FFFFFF;
  --c-scrim: rgba(16, 24, 40, 0.44);

  /* ---- Elevation (calm, cool) ---- */
  --e-1: 0 1px 2px rgba(16, 24, 40, 0.06);
  --e-2: 0 4px 12px rgba(16, 24, 40, 0.08);
  --e-3: 0 12px 32px rgba(16, 24, 40, 0.14);
  --e-accent: 0 4px 14px rgba(26, 86, 219, 0.28);

  /* ---- Motion ---- */
  --motion-fast: 140ms;
  --motion-base: 220ms;
  --motion-slow: 320ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.3, 0.5, 1); /* decorative only, no-preference only */

  /* ---- Icon & touch sizes ---- */
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --touch-min: 44px;   /* mobile/touch interactive target */
  --touch-min-desk: 40px;

  /* ---- Layout ---- */
  --bp-md: 48em;  /* 768  — two-pane */
  --bp-lg: 80em;  /* 1280 — three-column */
  --rail-w: 72px;         /* nav rail, 768–1279 */
  --rail-w-lg: 88px;      /* nav, >=1280 */
  --list-w: 320px;        /* chat list, 768–1279 */
  --list-w-lg: 360px;     /* chat list, >=1280 */
  --thread-max: 760px;    /* dialog content column */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* ---- Legacy aliases (keep old components rendering, now canonical) ---- */
  --font: var(--font-ui);
  --bg: var(--c-bg);
  --surface: var(--c-surface);
  --surface-2: var(--c-surface-2);
  --text: var(--c-text);
  --text-muted: var(--c-text-2);
  --accent: var(--c-accent);
  --accent-soft: var(--c-accent-soft);
  --accent-soft-strong: rgba(26, 86, 219, 0.16);
  --bubble-out: var(--c-bubble-out);
  --bubble-in: var(--c-bubble-in);
  --border: var(--c-border);
  --danger: var(--c-danger);
  --radius: var(--r-md);   /* финальный рантайм = 16px (max-ui/eco-skin-v2 пишут то же) */
  --radius-bubble: 18px;   /* намеренный шаг между r-md(16) и r-lg(20); рантайм тот же */
  --shadow: var(--e-1);
  --list-width: var(--list-w-lg);
  --header-h: 56px;
  --nav-h: 58px;
  --nav-icon: 24px;
  --nav-label: 11px;
  --composer-h: 52px;
  --composer-pill-radius: var(--r-full);
  --nav-blur: blur(16px) saturate(1.15);
}

html[data-theme="dark"] {
  color-scheme: dark;

  --c-bg: #0C111D;
  --c-surface: #131A2A;
  --c-surface-2: #1B2436;
  --c-surface-3: #232E44;
  --c-text: #EDF1F8;       /* 15.34 on surface */
  --c-text-2: #AAB5C8;     /* 8.40 */
  --c-text-3: #8FA2BC;     /* 6.67 */
  --c-border: #263149;
  --c-border-strong: #35415C;
  --c-accent: #6B96FF;     /* 6.15 */
  --c-accent-strong: #8AB0FF;
  --c-accent-soft: rgba(107, 150, 255, 0.16);
  --c-on-accent: #0C111D;
  --c-success: #2FBE8E;    /* 7.34 */
  --c-success-soft: rgba(47, 190, 142, 0.14);
  --c-warn: #E8A23D;       /* 8.00 */
  --c-warn-soft: rgba(232, 162, 61, 0.14);
  --c-danger: #F97066;     /* 6.24 */
  --c-danger-soft: rgba(249, 112, 102, 0.14);
  --c-bubble-out: #1E3A5F; /* text on it: 10.15 */
  --c-bubble-in: #1B2436;  /* text on it: 13.71 */
  --c-scrim: rgba(3, 6, 12, 0.60);

  --e-1: 0 1px 2px rgba(0, 0, 0, 0.40);
  --e-2: 0 4px 12px rgba(0, 0, 0, 0.45);
  --e-3: 0 12px 32px rgba(0, 0, 0, 0.55);
  --e-accent: 0 4px 14px rgba(0, 0, 0, 0.50);

  /* M02 2026-09-14: паритет с eco-skin-v2 dark — раньше алиас оставался
     светлым rgba(26,86,219,…) и в тёмной теме без eco-слоя был бы невидим. */
  --accent-soft-strong: rgba(107, 150, 255, 0.32);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0.01ms;
    --motion-base: 0.01ms;
    --motion-slow: 0.01ms;
  }
}