/* ============================================================================
   TrioSoft Design System 16.7.0 — «Prism»
   Слой 1 из 3: DESIGN TOKENS + BASE + UTILITIES
   ----------------------------------------------------------------------------
   Все токены выводятся из базовых переменных, которыми управляет админ-панель
   (--paper, --solid, --ink, --s1, --s2, --r-md/lg/xl, --content, --font-scale).
   Поэтому смена цветов, радиуса и ширины контента в админке продолжает
   работать и полностью управляет новым визуальным слоем.
   Не подключается к админ-панели (admin.html грузит только admin.css).
   ========================================================================== */

:root {
  /* ---------- фирменные семейства ---------- */
  --ts-font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', 'Segoe UI', Roboto, sans-serif;
  --ts-font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
  --ts-num: tabular-nums lining-nums;

  /* ---------- источники света (управляются админкой) ---------- */
  --ts-accent: var(--s1, #0071e3);
  --ts-accent-2: var(--s2, #5e5ce6);
  --ts-accent-rgb: var(--s1-rgb, 0, 113, 227);

  /* ---------- чернила ---------- */
  --ts-ink: var(--ink, #1d1d1f);
  --ts-ink-2: var(--ink-2, #494b52);
  --ts-ink-3: var(--ink-3, #86868b);
  --ts-ink-inverse: var(--solid, #ffffff);

  /* ---------- поверхности: глубина тоном, а не блюром ---------- */
  --ts-canvas: var(--paper, #f5f5f7);
  --ts-sunken: color-mix(in srgb, var(--ink, #1d1d1f) 4%, transparent);
  --ts-surface: color-mix(in srgb, var(--solid, #fff) 72%, transparent);
  --ts-surface-raised: color-mix(in srgb, var(--solid, #fff) 88%, transparent);
  --ts-surface-float: color-mix(in srgb, var(--solid, #fff) 96%, transparent);
  --ts-surface-solid: var(--solid, #ffffff);

  /* ---------- линии ---------- */
  --ts-line: color-mix(in srgb, var(--ink, #1d1d1f) 9%, transparent);
  --ts-line-strong: color-mix(in srgb, var(--ink, #1d1d1f) 16%, transparent);
  --ts-line-accent: color-mix(in srgb, var(--ts-accent) 32%, transparent);

  /* ---------- заливки состояний ---------- */
  --ts-fill: color-mix(in srgb, var(--ink, #1d1d1f) 5%, transparent);
  --ts-fill-hover: color-mix(in srgb, var(--ink, #1d1d1f) 8%, transparent);
  --ts-fill-active: color-mix(in srgb, var(--ink, #1d1d1f) 12%, transparent);
  --ts-tint: color-mix(in srgb, var(--ts-accent) 10%, transparent);
  --ts-tint-strong: color-mix(in srgb, var(--ts-accent) 18%, transparent);

  /* ---------- семантика ---------- */
  --ts-success: var(--green, #30a46c);
  --ts-warning: var(--orange, #c2740c);
  --ts-danger: var(--red, #e5484d);
  --ts-premium: #c8963e;
  --ts-success-soft: color-mix(in srgb, var(--ts-success) 12%, transparent);
  --ts-warning-soft: color-mix(in srgb, var(--ts-warning) 13%, transparent);
  --ts-danger-soft: color-mix(in srgb, var(--ts-danger) 12%, transparent);
  --ts-premium-soft: color-mix(in srgb, var(--ts-premium) 14%, transparent);

  /* ---------- геометрия ---------- */
  --ts-r-xs: 8px;
  --ts-r-sm: 11px;
  --ts-r-md: var(--r-md, 15px);
  --ts-r-lg: var(--r-lg, 19px);
  --ts-r-xl: var(--r-xl, 25px);
  --ts-r-2xl: calc(var(--r-xl, 25px) + 9px);
  --ts-r-pill: 999px;

  /* ---------- ритм (шаг 4px) ---------- */
  --ts-1: 4px;   --ts-2: 8px;   --ts-3: 12px;  --ts-4: 16px;
  --ts-5: 20px;  --ts-6: 24px;  --ts-7: 32px;  --ts-8: 40px;
  --ts-9: 48px;  --ts-10: 64px; --ts-11: 80px; --ts-12: 104px;

  --ts-gutter: clamp(16px, 3.4vw, 32px);
  --ts-max: var(--content, 1180px);
  --ts-section-y: clamp(48px, 6vw, 88px);

  /* ---------- типографическая шкала ---------- */
  --ts-text-2xs: 10.5px;
  --ts-text-xs: 11.5px;
  --ts-text-sm: 13px;
  --ts-text-base: 14.5px;
  --ts-text-md: 15.5px;
  --ts-text-lg: 17px;
  --ts-text-xl: 20px;
  --ts-display-sm: clamp(22px, 2.4vw, 28px);
  --ts-display-md: clamp(26px, 3.2vw, 38px);
  --ts-display-lg: clamp(32px, 4.6vw, 52px);
  --ts-display-xl: clamp(38px, 6vw, 72px);

  --ts-track-display: -.038em;
  --ts-track-title: -.028em;
  --ts-track-body: -.011em;
  --ts-track-caps: .1em;

  /* ---------- высоты элементов управления ---------- */
  --ts-control-xs: 30px;
  --ts-control-sm: 36px;
  --ts-control: 42px;
  --ts-control-lg: 48px;

  /* ---------- глубина ---------- */
  --ts-shadow-0: none;
  --ts-shadow-1: 0 1px 2px color-mix(in srgb, var(--ts-shadow-ink) 22%, transparent);
  --ts-shadow-2: 0 2px 6px color-mix(in srgb, var(--ts-shadow-ink) 16%, transparent), 0 10px 26px color-mix(in srgb, var(--ts-shadow-ink) 14%, transparent);
  --ts-shadow-3: 0 4px 12px color-mix(in srgb, var(--ts-shadow-ink) 18%, transparent), 0 22px 54px color-mix(in srgb, var(--ts-shadow-ink) 20%, transparent);
  --ts-shadow-4: 0 32px 90px color-mix(in srgb, var(--ts-shadow-ink) 34%, transparent);
  --ts-shadow-ink: #0b1020;
  --ts-glow: 0 8px 30px color-mix(in srgb, var(--ts-accent) 26%, transparent);
  --ts-inner-light: inset 0 1px 0 color-mix(in srgb, #ffffff 70%, transparent);

  /* ---------- движение ---------- */
  --ts-dur-1: 120ms;
  --ts-dur-2: 180ms;
  --ts-dur-3: 240ms;
  --ts-dur-4: 340ms;
  --ts-dur-slow: 620ms;
  --ts-ease: cubic-bezier(.22, .8, .28, 1);
  --ts-ease-out: cubic-bezier(.16, 1, .3, 1);
  --ts-ease-in: cubic-bezier(.5, 0, .75, 0);
  --ts-spring: cubic-bezier(.34, 1.4, .5, 1);

  /* ---------- материал плавающего хрома ---------- */
  --ts-chrome: color-mix(in srgb, var(--solid, #fff) 82%, transparent);
  --ts-chrome-blur: saturate(170%) blur(22px);
  --ts-scrim: color-mix(in srgb, #05070d 58%, transparent);

  /* ---------- фокус ---------- */
  --ts-focus-ring: 0 0 0 3px color-mix(in srgb, var(--ts-accent) 34%, transparent);
  --ts-z-header: 900;
  --ts-z-drawer: 1100;
  --ts-z-modal: 1200;
  --ts-z-toast: 1400;
}

/* --------------------------------------------------------------------------
   Совместимость: эти переменные использовались в styles.css и app.js,
   но нигде не объявлялись (#statusDot, .vt-report-card, .vt-report-hash).
   Теперь они определены и берут значения из семантической палитры.
-------------------------------------------------------------------------- */
:root {
  --success: var(--ts-success);
  --warning: var(--ts-warning);
  --danger: var(--ts-danger);
  --line: var(--ts-line);
  --surface-solid: var(--ts-surface-solid);
  --muted: var(--ts-ink-3);
  --panel: var(--ts-surface);
}

html[data-theme="light"] {
  --ts-shadow-ink: #101828;
  --ts-inner-light: inset 0 1px 0 color-mix(in srgb, #ffffff 88%, transparent);
  --ts-sunken: color-mix(in srgb, var(--ink, #1d1d1f) 3.5%, transparent);
  --ts-surface: color-mix(in srgb, var(--solid, #fff) 78%, transparent);
  --ts-surface-raised: color-mix(in srgb, var(--solid, #fff) 92%, transparent);
  --ts-scrim: color-mix(in srgb, #1b2233 42%, transparent);
}

html[data-theme="dark"] {
  --ts-shadow-ink: #000308;
  --ts-inner-light: inset 0 1px 0 color-mix(in srgb, #ffffff 8%, transparent);
  --ts-sunken: color-mix(in srgb, var(--ink, #f5f5f7) 5%, transparent);
  --ts-surface: color-mix(in srgb, var(--solid, #1c1c1e) 64%, transparent);
  --ts-surface-raised: color-mix(in srgb, var(--solid, #1c1c1e) 82%, transparent);
  --ts-surface-float: color-mix(in srgb, var(--solid, #1c1c1e) 94%, transparent);
  --ts-line: color-mix(in srgb, var(--ink, #f5f5f7) 11%, transparent);
  --ts-line-strong: color-mix(in srgb, var(--ink, #f5f5f7) 20%, transparent);
  --ts-fill: color-mix(in srgb, var(--ink, #f5f5f7) 7%, transparent);
  --ts-fill-hover: color-mix(in srgb, var(--ink, #f5f5f7) 11%, transparent);
  --ts-fill-active: color-mix(in srgb, var(--ink, #f5f5f7) 16%, transparent);
  --ts-tint: color-mix(in srgb, var(--ts-accent) 16%, transparent);
  --ts-tint-strong: color-mix(in srgb, var(--ts-accent) 26%, transparent);
  --ts-chrome: color-mix(in srgb, var(--solid, #1c1c1e) 74%, transparent);
  --ts-scrim: color-mix(in srgb, #01030a 66%, transparent);
  --ts-premium: #e0b45f;
}

/* ==========================================================================
   BASE — общая база для публичной части
   ========================================================================== */

html {
  font-family: var(--ts-font);
  scroll-padding-top: 96px;
}

body {
  font-family: var(--ts-font);
  letter-spacing: var(--ts-track-body);
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  letter-spacing: var(--ts-track-title);
  text-wrap: balance;
}

h1, .ts-display {
  letter-spacing: var(--ts-track-display);
}

p, li {
  text-wrap: pretty;
}

/* Единая метрика цифр во всех метриках интерфейса */
strong, b, .ts-num, time, td, th {
  font-variant-numeric: var(--ts-num);
}

:focus-visible {
  outline: 2px solid var(--ts-accent);
  outline-offset: 2px;
  border-radius: var(--ts-r-xs);
}

::selection {
  background: color-mix(in srgb, var(--ts-accent) 26%, transparent);
}

/* Скроллбар в стиле системы */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ts-ink-3) 46%, transparent) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--ts-ink-3) 34%, transparent);
  border: 3px solid transparent;
  background-clip: padding-box;
  border-radius: var(--ts-r-pill);
}
*::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--ts-ink-3) 56%, transparent);
  border: 3px solid transparent;
  background-clip: padding-box;
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */

.ts-shell {
  width: min(calc(100% - (var(--ts-gutter) * 2)), var(--ts-max));
  margin-inline: auto;
}

.ts-stack { display: grid; gap: var(--ts-4); }
.ts-stack-lg { display: grid; gap: var(--ts-6); }
.ts-row { display: flex; align-items: center; gap: var(--ts-3); }
.ts-row-wrap { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ts-2); }
.ts-spacer { flex: 1 1 auto; }
.ts-truncate { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ts-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ts-mono { font-family: var(--ts-font-mono); font-size: .92em; }
.ts-muted { color: var(--ts-ink-2); }
.ts-quiet { color: var(--ts-ink-3); }
.ts-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ---- Signature: призматическая грань --------------------------------------
   Три полосы света на кромке поверхности — фирменный знак TrioSoft (нас трое).
   Применяется точечно: hero, featured-карточки, рекомендованный тариф, модалки.
--------------------------------------------------------------------------- */
.ts-prism {
  position: relative;
  isolation: isolate;
}
.ts-prism::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--ts-accent) 62%, transparent) 0%,
    color-mix(in srgb, var(--ts-accent-2) 40%, transparent) 22%,
    transparent 46%,
    transparent 66%,
    color-mix(in srgb, var(--ts-success) 22%, transparent) 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: .55;
}

/* ---- Signature: фасетная линейка ------------------------------------------
   Три штриха над заголовком секции: три разработчика, одна экосистема.
--------------------------------------------------------------------------- */
.ts-facets {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: none;
}
.ts-facets i {
  display: block;
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: var(--ts-accent);
}
.ts-facets i:nth-child(2) { width: 9px; background: var(--ts-accent-2); opacity: .8; }
.ts-facets i:nth-child(3) { width: 5px; background: var(--ts-success); opacity: .7; }

/* ---- Ambient field: один композитный слой на страницу --------------------- */
.ts-ambient {
  position: fixed;
  inset: 0;
  z-index: -4;
  pointer-events: none;
  background:
    radial-gradient(760px 460px at 8% -8%, color-mix(in srgb, var(--ts-accent) 16%, transparent), transparent 62%),
    radial-gradient(640px 420px at 100% 4%, color-mix(in srgb, var(--ts-accent-2) 14%, transparent), transparent 58%),
    radial-gradient(700px 500px at 52% 108%, color-mix(in srgb, var(--ts-success) 8%, transparent), transparent 62%);
  opacity: .9;
  animation: ts-ambient-drift 46s var(--ts-ease) infinite alternate;
}

@keyframes ts-ambient-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(0, -2.2%, 0) scale(1.05); }
}

/* Мягкая зернистость: убирает бандинг на градиентах, одна лёгкая текстура */
.ts-grain {
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  opacity: .04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Появление контента при скролле --------------------------------------- */
html.ts-reveal-ready [data-ts-reveal] {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity var(--ts-dur-slow) var(--ts-ease-out), transform var(--ts-dur-slow) var(--ts-ease-out);
}
html.ts-reveal-ready [data-ts-reveal].ts-revealed {
  opacity: 1;
  transform: none;
}

/* ---- Уважение к системным настройкам -------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  html.ts-reveal-ready [data-ts-reveal] { opacity: 1; transform: none; }
  .ts-ambient { animation: none; }
}

@media (prefers-contrast: more) {
  :root {
    --ts-line: color-mix(in srgb, var(--ink) 26%, transparent);
    --ts-line-strong: color-mix(in srgb, var(--ink) 42%, transparent);
    --ts-ink-2: var(--ink);
  }
}