/* Exact ecosystem token declarations, scoped to call surface. */
/* ═══════════════════════════════════════════════════════════════════════════
   VYSHKA · tokens.css — дизайн-токены единого продукта «ВЫШКА»
   Канон: docs/ADR-2026-08-30-UNIFIED-VYSHKA.md §D8 (референсы Константина).
   Техника градиентов/стекла: frontend/css/voice-mockup-skin.css (только приём).
   Все компоненты (components.css) и фичерагенты читают ТОЛЬКО эти переменные.

   D5/C5#9 (02.09.2026): СВЕТЛАЯ тема — дефолт CSS (:root), тёмная — опция
   (html[data-theme="dark"] #call-overlay, html[data-theme="dark"] #call-return). no-JS/prerender получают светлую без JS-бута.
   ═══════════════════════════════════════════════════════════════════════════ */

#call-overlay, #call-return {
  /* ── §T1 · Поверхности ──
     Канон Owner 02.09.2026 (NIGHT-B6): фон #f6f8fc, поверхности #ffffff. */
  --vy-bg: #f6f8fc;            /* фон приложения */
  --vy-bg-deep: #eef2fa;       /* макетный глубокий фон (glow-база) */
  --vy-panel: #ffffff;         /* панель */
  --vy-panel-2: #eef2fa;       /* панель приподнятая */
  --vy-panel-3: #eaf0ff;       /* панель активная/hover */
  --vy-panel-deep: #fbfcff;    /* тайлы/плейеры (макет) */
  --vy-glass: rgba(255, 255, 255, .82);   /* стекло панели */
  --vy-glass-strong: rgba(255, 255, 255, .95); /* стекло доков/тостов */
  --vy-scrim: rgba(15, 23, 42, .45);      /* подложка модалок */

  /* ── §T2 · Границы ── */
  --vy-border: #e2e8f4;
  --vy-border-soft: #e2e8f4;
  --vy-border-strong: #8797b3;
  --vy-border-hover: #6d83a4;
  --vy-border-glass: rgba(30, 50, 110, .12);

  /* ── §T3 · Основной, вторичный и приглушённый текст ── */
  --vy-text: #0f172a;
  --vy-text-sub: #516180;
  --vy-text-mute: #5b6884;
  --vy-text-on-accent: #ffffff;
  --vy-text-on-success: #ffffff;

  /* ── §T4 · Семантическая палитра vyshka.cloud, E19 (2026-09-07).
     Solid brand remains dark enough for white text in both themes.
     Accent is for foregrounds and becomes lighter in dark mode. ── */
  --vy-brand: #1a56db;
  --vy-brand-hover: #1748b4;
  --vy-secondary: #3b82f6;
  --vy-sky: #2a9dd3;
  --vy-accent: #1a56db;
  --vy-accent-soft: #dce9ff;
  --vy-info: #086b95;
  --vy-selection-bg: #c9ddff;
  --vy-selection-ink: #0f172a;
  --vy-grad-primary: linear-gradient(135deg, var(--vy-brand), #1f65d6);
  --vy-grad-primary-hover: linear-gradient(135deg, var(--vy-brand-hover), #1a56db);
  --vy-cyan: var(--vy-accent);          /* legacy foreground alias */
  --vy-violet: var(--vy-accent);        /* legacy foreground alias */
  --vy-violet-2: var(--vy-accent);
  --vy-indigo: var(--vy-accent);
  --vy-green: #047857;         /* speaking/online: 5.2:1 на #fff */
  --vy-red: #b91c1c;           /* error/destructive state unchanged */

  /* ── §T5 · Градиенты (рецепты two-layer padding-box/border-box) ──
     QA-GATE 2026-08-30: стопы кнопочного градиента дают white ≥ 4.84 на любом.
     CTA-стопы одинаковы в обеих темах (white ≥ 4.8 на каждом). */
  --vy-grad-brand: linear-gradient(135deg, var(--vy-brand), #1f65d6);
  --vy-grad-violet: var(--vy-grad-primary);
  --vy-grad-violet-hover: var(--vy-grad-primary-hover);
  --vy-grad-ring-glow: radial-gradient(1100px 480px at 50% -6%, rgba(60, 110, 255, .08), transparent 62%);

  /* ── §T6 · Радиусы ── */
  --vy-r-sm: 12px;
  --vy-r-md: 16px;
  --vy-r-lg: 20px;
  --vy-r-xl: 20px;
  --vy-r-full: 999px;

  /* ── §T7 · Тени: мягкие, вместо глоу ── */
  --vy-shadow-card: 0 2px 10px rgba(24, 39, 75, .035);
  --vy-shadow-pop: 0 12px 32px rgba(24, 39, 75, .10);
  --vy-glow-violet: none;
  --vy-glow-ring: none;
  --vy-glow-cyan: none;
  --vy-glow-green: none;
  --vy-glow-red: none;

  /* ── §T8 · Шрифт ── */
  --vy-font: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --vy-font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --vy-fs-2xs: 11px;
  --vy-fs-xs: 12px;
  --vy-fs-sm: 13px;
  --vy-fs-md: 14px;
  --vy-fs-lg: 16px;
  --vy-fs-xl: 18px;
  --vy-fs-2xl: 24px;
  --vy-fs-3xl: 32px;
  --vy-lh-tight: 1.2;
  --vy-lh-body: 1.45;

  /* ── §T9 · Spacing-шкала ── */
  --vy-sp-1: 4px;
  --vy-sp-2: 8px;
  --vy-sp-3: 12px;
  --vy-sp-4: 16px;
  --vy-sp-5: 24px;
  --vy-sp-6: 32px;

  /* ── §T9b · Интерактивная геометрия ──
     Глиф остаётся 24px; 44px — только hit-area кнопки/ссылки. */
  --vy-control-min: 44px;
  --vy-control-comfortable: 48px;
  --vy-icon-size: 24px;
  --vy-icon-stroke: 1.8;

  /* ── §T10 · Каркас (rail/topbar/right-rail, канон §D8) ── */
  --vy-rail-w: 88px;
  --vy-topbar-h: 96px;
  --vy-topbar-compress: 0px;
  --vy-density-gap: 20px;
  --vy-row-padding: 12px;
  --vy-font-display: "Unbounded", "Onest", system-ui, sans-serif;
  --vy-weight-normal: 400;
  --vy-weight-medium: 500;
  --vy-weight-strong: 600;
  --vy-right-rail-w: 300px;

  /* ── §T11 · Z-шкала ── */
  --vy-z-base: 0;
  --vy-z-raised: 10;
  --vy-z-sticky: 100;     /* topbar */
  --vy-z-dropdown: 200;
  --vy-z-scrim: 800;
  --vy-z-toast: 900;
  --vy-z-modal: 1000;
  --vy-z-tooltip: 1100;

  /* One 2px outline; compatibility shadow token deliberately carries no halo. */
  --vy-focus-width: 2px;
  --vy-focus-offset: 2px;
  --vy-focus-color: #1a56db;
  --vy-focus-ring: none;

  /* ── §T13 · Motion-шкала (гасится в base.css при reduced-motion) ── */
  --vy-dur-fast: 80ms;
  --vy-dur-base: 160ms;
  --vy-dur-slow: 240ms;
  --vy-dur-slower: 400ms;
  --vy-ease: cubic-bezier(.4, 0, .2, 1);

  /* ── §T13b · Единое спокойное «дыхание» ──
     Только brand / aria-current navigation / explicit live state. Значение
     подключается в components.css; обычные иконки его не наследуют. */
  --vy-breathe-duration: 4.2s;
  --vy-breathe-ease: cubic-bezier(.45, 0, .55, 1);
  --vy-breathe-shift: -.5px;
  --vy-breathe-opacity-rest: .96;
  --vy-motion-breathe: vy-calm-breathe var(--vy-breathe-duration) var(--vy-breathe-ease) infinite;

  /* ── §T15 · Локальные подложки компонентов ── */
  --vy-pill-bg: rgba(255, 255, 255, .85);    /* подложка .vy-pill */
  --vy-empty-bg: rgba(255, 255, 255, .6);    /* подложка .vy-empty */

  color-scheme: light;
}

/* ═══════════════════════════════════════════════════════════════════════════
   §T14 · ТЁМНАЯ ТЕМА — html.vy-theme-dark (механизм: features/account +
   boot Layout.jsx + инлайн-бут index.html; класс на <html> ТОЛЬКО при явном
   выборе theme:'dark' с флагом vy.theme-user-set-v2; светлая — дефолт CSS).
   Селектор `html[data-theme="dark"] #call-overlay, html[data-theme="dark"] #call-return` — специфичность (0,2,0): канон ТОКЕНОВ
   живёт только здесь и побеждает односелекторные дубли `html.vy-theme-dark`
   (0,1,1) в чужих модулях независимо от порядка подключения — тот же
   контракт, что был у :root.vy-theme-light (факт 2026-08-30, §D8).
   Компонентные светлые оверреи `:root.vy-theme-light .vy-*` в модулях
   сохранены: boot продолжает вешать vy-theme-light для светлой — паритет
   охраняет тест shell-routes (appearance-boot-parity).
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] #call-overlay, html[data-theme="dark"] #call-return {
  /* ── Поверхности ── */
  --vy-bg: #0b1220;            /* фон приложения */
  --vy-bg-deep: #0b1220;       /* макетный глубокий фон (glow-база) */
  --vy-panel: #111c2e;         /* панель */
  --vy-panel-2: #142137;       /* панель приподнятая */
  --vy-panel-3: #203e67;       /* панель активная/hover */
  --vy-panel-deep: #17243a;    /* тайлы/плейеры (макет) */
  --vy-glass: rgba(17, 28, 46, .82);   /* стекло панели */
  --vy-glass-strong: rgba(17, 28, 46, .95); /* стекло доков/тостов */
  --vy-scrim: rgba(4, 6, 13, .6);      /* подложка модалок */

  /* ── Границы ── */
  --vy-border: #2c3d59;
  --vy-border-soft: #2c3d59;
  --vy-border-strong: #4d6588;
  --vy-border-hover: #6d83a4;
  --vy-border-glass: rgba(140, 160, 220, .14);

  /* ── Текст на slate-поверхностях ── */
  --vy-text: #edf3ff;
  --vy-text-sub: #a9b8d0;
  /* Tertiary text remains visibly quieter than --vy-text-sub, while retaining
     AA on every dark shell surface used by small labels and room metadata. */
  --vy-text-mute: #9aacc7;
  --vy-text-on-accent: #ffffff;
  --vy-text-on-success: #04120c;

  /* ── Читаемые акценты; solid --vy-brand унаследован без осветления ── */
  --vy-accent: #91baff;
  --vy-accent-soft: #203e67;
  --vy-info: #71d5fa;
  --vy-selection-bg: #244c81;
  --vy-selection-ink: #edf3ff;
  --vy-cyan: var(--vy-accent);
  --vy-violet: var(--vy-accent);
  --vy-violet-2: var(--vy-accent);
  --vy-indigo: var(--vy-accent);        /* legacy foreground alias */
  --vy-green: #34d399;
  --vy-red: #f87171;

  /* ── Градиенты: отличается только ring-glow ── */
  --vy-grad-ring-glow: radial-gradient(1100px 480px at 50% -6%, rgba(56, 90, 220, .10), transparent 62%);

  /* ── Тени и глоу ── */
  --vy-shadow-card: 0 2px 10px rgba(2, 4, 10, .16);
  --vy-shadow-pop: 0 12px 32px rgba(2, 4, 10, .32);
  --vy-glow-violet: none;
  --vy-glow-ring: none;   /* активная рамка (макет) */
  --vy-glow-cyan: none;
  --vy-glow-green: none;
  --vy-glow-red: none;

  /* ── Локальные подложки компонентов (парные к §T15) ── */
  --vy-pill-bg: rgba(17, 28, 46, .85);    /* подложка .vy-pill */
  --vy-empty-bg: rgba(17, 28, 46, .6);   /* подложка .vy-empty */

  /* ── Focus-ring: те же 3px, контрастный тёмный offset ── */
  --vy-focus-contrast: rgba(11, 18, 32, .96);
  --vy-focus-color: #91baff;

  color-scheme: dark;
}

/* Density changes content rhythm, never the 44px touch target. */
html[data-vy-density="compact"] #call-overlay, html[data-vy-density="compact"] #call-return {
  --vy-topbar-h: 64px;
  --vy-density-gap: 12px;
  --vy-row-padding: 8px;
}

/* Original 4190 ecosystem palette: semantic surfaces, not feature overrides. */
#call-overlay, #call-return {
  --vy-brand-soft: #eaf0ff;
  --vy-avatar-blue: #dce9ff; --vy-avatar-cyan: #d6f2fa;
  --vy-avatar-indigo: #e5e8ff; --vy-avatar-slate: #e3eaf4; --vy-on-avatar: #17345f;
  --vy-shadow-small: 0 2px 5px rgb(23 43 99 / 6%);
  --vy-shadow-card: 0 10px 34px rgb(23 43 99 / 8%), 0 2px 8px rgb(23 43 99 / 3%);
}
html[data-theme="dark"] #call-overlay, html[data-theme="dark"] #call-return {
  --vy-brand-soft: #1b3156;
  --vy-avatar-blue: #203e67; --vy-avatar-cyan: #153d51;
  --vy-avatar-indigo: #303660; --vy-avatar-slate: #29394f; --vy-on-avatar: #e5edff;
  --vy-border-strong: #6d83a4;
  --vy-shadow-small: 0 2px 5px rgb(0 0 0 / 14%);
  --vy-shadow-card: 0 16px 48px rgb(0 0 0 / 22%);
}