/* ============================================================
   PLANARI — единая дизайн-система (single source of truth)
   Применяется на сайте, во всех блоках и в мини-приложении.
   Бренд: Planari / Планари. Тема: «BIM-чертёж × кожа».
   Светлая + тёмная. По умолчанию следует системе; data-theme переопределяет.
   ============================================================ */

/* — Шрифты бренда (самохост на сервере). Фолбэк — системные. — */
@import url("/fonts/fonts.css");

:root{
  /* ---- REFERENCE (бренд-константы, не меняются между темами) ---- */
  --brand-teal:#3fc8d4;   /* блюпринт / технический слой */
  --brand-brass:#d6a14a;  /* товар / кожа / CTA */
  --brand-oxblood:#8c2f33;
  --grad: linear-gradient(100deg,#d6a14a 0%,#3fc8d4 100%);  /* кожа→блюпринт */
  --radius:18px; --radius-sm:12px; --radius-lg:24px;
  --font-display:"Archivo","Archivo Expanded",system-ui,"Segoe UI",sans-serif;
  --font-body:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);

  /* ---- SEMANTIC: тёмная тема (база бренда) ---- */
  --bg:#0b0c10; --bg-2:#101218; --surface:#16181f; --surface-2:#1d2129;
  --line:#272b34; --line-2:#343a45;
  --text:#f1efe9; --text-2:#c5c8d0; --muted:#9298a6;
  --accent:#3fc8d4; --accent-weak:#13312f; --accent-ink:#062227;
  --cta-ink:#08252b; --price-ink:#241704;
  --shadow:0 12px 34px rgba(0,0,0,.45); --shadow-sm:0 4px 14px rgba(0,0,0,.35);
  color-scheme:dark;
}

/* Светлая тема — когда система светлая и нет явного выбора */
@media (prefers-color-scheme:light){
  :root:not([data-theme]){
    --bg:#f4f2ec; --bg-2:#ece9e0; --surface:#ffffff; --surface-2:#f7f5ef;
    --line:#e4e1d7; --line-2:#d3cfc2;
    --text:#191b20; --text-2:#43474f; --muted:#6f6b60;
    --accent:#0f7f8b; --accent-weak:#dff0f1; --accent-ink:#ffffff;
    --cta-ink:#241704; --price-ink:#241704;
    --shadow:0 12px 34px rgba(40,34,20,.12); --shadow-sm:0 4px 14px rgba(40,34,20,.08);
    color-scheme:light;
  }
}
/* Явный выбор пользователя/Telegram переопределяет всё */
:root[data-theme="light"]{
  --bg:#f4f2ec; --bg-2:#ece9e0; --surface:#ffffff; --surface-2:#f7f5ef;
  --line:#e4e1d7; --line-2:#d3cfc2;
  --text:#191b20; --text-2:#43474f; --muted:#6f6b60;
  --accent:#0f7f8b; --accent-weak:#dff0f1; --accent-ink:#ffffff;
  --cta-ink:#241704; --price-ink:#241704;
  --shadow:0 12px 34px rgba(40,34,20,.12); --shadow-sm:0 4px 14px rgba(40,34,20,.08);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#0b0c10; --bg-2:#101218; --surface:#16181f; --surface-2:#1d2129;
  --line:#272b34; --line-2:#343a45;
  --text:#f1efe9; --text-2:#c5c8d0; --muted:#9298a6;
  --accent:#3fc8d4; --accent-weak:#13312f; --accent-ink:#062227;
  --cta-ink:#08252b; --price-ink:#241704;
  --shadow:0 12px 34px rgba(0,0,0,.45); --shadow-sm:0 4px 14px rgba(0,0,0,.35);
  color-scheme:dark;
}

/* ---- База ---- */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{ -webkit-text-size-adjust:100% }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:15px; line-height:1.5;
  transition:background-color .25s var(--ease), color .25s var(--ease);
}
h1,h2,h3,.pl-display{ font-family:var(--font-display); font-weight:800; letter-spacing:-.01em; text-wrap:balance; }
.pl-mono{ font-family:var(--font-mono); }
a{ color:var(--accent); text-decoration:none; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; }
@media (prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important; scroll-behavior:auto!important} }

/* ---- Бренд-локап (логотип Planari / Планари) ---- */
.pl-brand{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-display);
  font-weight:800; letter-spacing:.2px; color:var(--text); }
.pl-brand__mark{ width:1.6em; height:1.6em; flex:0 0 auto; border-radius:7px; display:block; }
.pl-brand__name{ font-size:1.05rem; }
.pl-brand__name .pl-grad{ /* акцентная часть слова */ }
.pl-grad{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.pl-brand__sub{ font-family:var(--font-mono); font-weight:500; font-size:.66em; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); }

/* ---- Кнопки ---- */
.pl-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-body); font-weight:700; font-size:14px; line-height:1;
  padding:12px 18px; border-radius:var(--radius-sm); border:1px solid transparent; cursor:pointer;
  transition:transform .12s var(--ease), filter .15s var(--ease), background-color .15s var(--ease); }
.pl-btn:active{ transform:translateY(1px) }
.pl-btn--primary{ background:var(--grad); color:var(--cta-ink); border:none; }
.pl-btn--primary:hover{ filter:brightness(1.06) }
.pl-btn--ghost{ background:var(--surface); color:var(--text); border:1px solid var(--line); }
.pl-btn--ghost:hover{ border-color:var(--line-2) }

/* ---- Чипы / бейджи ---- */
.pl-chip{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600;
  padding:4px 10px; border-radius:20px; background:var(--surface-2); color:var(--text); border:1px solid var(--line); }
.pl-chip--on{ background:var(--accent-weak); border-color:transparent; color:var(--accent); }
.pl-chip--price{ background:var(--brand-brass); color:var(--price-ink); border:none; font-weight:700; }
.pl-chip--teal{ background:var(--accent-weak); color:var(--accent); border:none; }
.pl-chip--brass{ background:rgba(214,161,74,.16); color:var(--brand-brass); border:none; }

/* ---- Карточки / поверхности ---- */
.pl-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow-sm); }
.pl-surface{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); }
.pl-input{ width:100%; padding:11px 13px; border-radius:var(--radius-sm); border:1px solid var(--line);
  background:var(--bg-2); color:var(--text); font-size:14px; font-family:var(--font-body); }
.pl-input::placeholder{ color:var(--muted) }

/* ---- Переключатель темы ---- */
.pl-theme-toggle{ width:38px; height:38px; border-radius:10px; border:1px solid var(--line);
  background:var(--surface); color:var(--text); cursor:pointer; display:inline-flex;
  align-items:center; justify-content:center; font-size:17px; }
.pl-theme-toggle:hover{ border-color:var(--line-2) }

/* ---- Утилиты ---- */
.pl-eyebrow{ font-family:var(--font-mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted) }
.pl-divider{ height:1px; background:var(--line); border:0 }
.tabular{ font-variant-numeric:tabular-nums }