/* Product Lens — глобальные дизайн-токены (docs/design-system.md).
   Подключается везде: layout.html, studio_new.html.
   Все остальные CSS-файлы (studio.css, report.css) ссылаются на --pl-* отсюда. */

/* ═══════════════════════════════════════════════════════════
   LIGHT MODE (default)
═══════════════════════════════════════════════════════════ */
:root {
  /* ── Фоны ─────────────────────────────────────────────── */
  --pl-bg-0:        #07090A;   /* иммерсив / hero (всегда тёмный) */
  --pl-bg-1:        #0E1013;   /* тёмные карточки */
  --pl-bg-2:        #1A1D21;   /* вторичные тёмные карточки */
  --pl-bg-surface:  #F6F7F5;   /* body в light mode */
  --pl-bg-card:     #FFFFFF;   /* карточки в light mode */

  /* ── Текст ────────────────────────────────────────────── */
  --pl-text-0:      #ECEFEA;   /* основной текст (тёмный bg) */
  --pl-text-1:      #AEB6B0;   /* muted / вторичный — поднят контраст (было #8C9590, серый-на-сером) */
  --pl-text-2:      #87918B;   /* subtle / tertiary — поднят контраст (было #5A645E, почти невидим) */
  --pl-text-dark:   #111814;   /* основной текст (light mode) */
  --pl-text-dark-1: #5C6862;   /* вторичный (light mode) */

  /* ── Бренд / акцент ───────────────────────────────────── */
  --pl-accent:       #21A038;  /* основной зелёный */
  --pl-accent-glow:  #3ECF67;  /* glow / highlight */
  --pl-accent-bright:#62F08A;  /* самый яркий */

  /* ── Границы ──────────────────────────────────────────── */
  --pl-line:           rgba(255,255,255,.08);
  --pl-line-2:         rgba(255,255,255,.14);
  --pl-card-border:    rgba(0,0,0,.08);
  --pl-card-border-dk: rgba(255,255,255,.09);

  /* ── Стекло ───────────────────────────────────────────── */
  --pl-glass:   rgba(255,255,255,.045);
  --pl-glass-2: rgba(255,255,255,.07);

  /* ── Состояния ────────────────────────────────────────── */
  --pl-success: #21A038;
  --pl-warning: #D97706;
  --pl-error:   #DC2626;
  --pl-info:    #1896B4;

  /* ── Конкуренты ───────────────────────────────────────── */
  --pl-cmp-0: #D97706;
  --pl-cmp-1: #1d4ed8;
  --pl-cmp-2: #7c3aed;
  --pl-cmp-3: #475569;

  /* ── Шрифты ───────────────────────────────────────────── */
  --pl-font-ui:      "Golos Text",system-ui,sans-serif;
  --pl-font-display: "Unbounded",system-ui,sans-serif;
  --pl-font-mono:    "JetBrains Mono",monospace;

  /* ── Шкала размеров ───────────────────────────────────── */
  --pl-text-xs:   10px;
  --pl-text-sm:   12px;
  --pl-text-base: 14px;
  --pl-text-md:   16px;
  --pl-text-lg:   18px;
  --pl-text-xl:   clamp(22px, 3.2vw, 32px);
  --pl-text-2xl:  clamp(32px, 4.5vw, 48px);
  --pl-text-3xl:  clamp(36px, 5.4vw, 58px);

  /* ── Радиусы ──────────────────────────────────────────── */
  --pl-radius-xs:   6px;
  --pl-radius-sm:   8px;
  --pl-radius-md:   12px;
  --pl-radius-lg:   16px;
  --pl-radius-xl:   20px;
  --pl-radius-2xl:  26px;
  --pl-radius-full: 9999px;

  /* ── Тени ─────────────────────────────────────────────── */
  --pl-shadow-card:      0 36px 90px -36px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.05);
  --pl-shadow-btn:       0 14px 36px -10px rgba(62,207,103,.65);
  --pl-shadow-btn-hover: 0 20px 50px -10px rgba(62,207,103,.85);

  /* ── Body (light mode) ────────────────────────────────── */
  --pl-body-bg:      var(--pl-bg-surface);
  --pl-body-card:    var(--pl-bg-card);
  --pl-body-border:  var(--pl-card-border);
  --pl-body-text:    var(--pl-text-dark);
  --pl-body-muted:   var(--pl-text-dark-1);
}

/* ═══════════════════════════════════════════════════════════
   DARK MODE
═══════════════════════════════════════════════════════════ */
.dark,
[data-theme="dark"] {
  --pl-body-bg:     #0C0E0D;
  --pl-body-card:   rgba(255,255,255,.04);
  --pl-body-border: rgba(255,255,255,.09);
  --pl-body-text:   #DDEBD6;
  --pl-body-muted:  #8C9590;
}

/* ─────────────────────────────────────────────────────────────────────────────
   СТАНДАРТ САЙТА: инфо-иконка с ненавязчивой всплывающей подсказкой.
   Применение: <span class="pl-info" tabindex="0" role="button" aria-label="Что это"
                     data-tip="текст пояснения">i</span>
   Везде, где нужно коротко пояснить элемент, используем именно этот компонент.
   ───────────────────────────────────────────────────────────────────────────── */
.pl-info{position:relative;z-index:2;pointer-events:auto;display:inline-grid;place-items:center;width:16px;height:16px;flex:0 0 auto;border-radius:50%;border:1px solid rgba(255,255,255,.28);font-size:10px;font-style:italic;font-weight:700;line-height:1;color:#9aa6b2;cursor:help;margin-left:4px;vertical-align:middle;user-select:none}
.pl-info:hover,.pl-info:focus{color:#e8eaed;border-color:#62F08A;outline:none}
.pl-info::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);width:250px;max-width:62vw;background:#0e1316;color:#e8eaed;border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:9px 11px;font-size:12px;font-weight:400;font-style:normal;line-height:1.45;text-transform:none;letter-spacing:0;box-shadow:0 10px 30px rgba(0,0,0,.55);opacity:0;visibility:hidden;transition:opacity .14s ease;z-index:1200;pointer-events:none;white-space:normal;text-align:left}
.pl-info:hover::after,.pl-info:focus::after{opacity:1;visibility:visible}
@media (max-width:640px){.pl-info::after{left:auto;right:0;transform:none}}