/* Кто молодец — единый источник токенов. Импортируется лендингом и кабинетом.
   Значения перенесены дословно из дизайн-системы (Claude Design). */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;600&display=swap');

:root{
  /* ЦВЕТ — светлая */
  --bg:#ffffff; --text:#1f2328; --muted:rgba(31,35,40,.6); --faint:rgba(31,35,40,.42);
  --border:rgba(0,0,0,.08); --accent:#3a8dff; --accent-ink:#ffffff; --accent-soft:rgba(58,141,255,.1);
  --success:#1f9d55; --success-soft:rgba(31,157,85,.12); --danger:#e5484d; --danger-soft:rgba(229,72,77,.12);
  --warn:#b5820b; --warn-soft:rgba(181,130,11,.13); --card:#ffffff; --surface:#f6f7f9; --scrim:rgba(20,22,26,.28);
  --text-body:var(--text); --text-muted:var(--muted); --text-faint:var(--faint);
  --surface-page:var(--bg); --surface-card:var(--card); --surface-sunken:var(--surface);
  --border-hair:var(--border); --link:var(--accent);
  /* ТИПОГРАФИКА */
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,'SF Mono',monospace;
  --font-ui:var(--sans); --font-num:var(--mono);
  --w-regular:400; --w-medium:500; --w-semibold:600; --w-bold:700; --w-black:800;
  --fz-hero:52px; --fz-h1:34px; --fz-h2:26px; --fz-title:20px; --fz-lead:19px; --fz-body-lg:17px;
  --fz-body:15px; --fz-ui:14px; --fz-sm:13px; --fz-xs:12px; --fz-micro:11px;
  --fz-num-xl:44px; --fz-num-lg:34px; --fz-num-md:24px; --fz-num-sm:20px;
  --lh-tight:1.1; --lh-heading:1.15; --lh-body:1.5; --ls-hero:-.02em; --ls-mono:.06em;
  /* ГЕОМЕТРИЯ */
  --r-pill:18px; --r-pill-sm:16px; --r-chip:12px; --r-card:8px; --r-card-lg:12px; --r-phone:24px;
  --h-btn:40px; --h-btn-sm:36px; --h-btn-lg:44px; --h-btn-hero:52px; --h-chip:24px; --h-badge:32px; --h-input:38px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:28px; --sp-8:32px; --sp-card:24px;
  --space-1:var(--sp-1); --space-2:var(--sp-2); --space-3:var(--sp-3); --space-4:var(--sp-4);
  --space-5:var(--sp-5); --space-6:var(--sp-6); --space-7:var(--sp-7); --space-8:var(--sp-8);
  --bw-hair:1px; --bw-emph:1.5px;
  --elev:0 1px 2px rgba(0,0,0,.05); --elev-modal:0 20px 60px rgba(0,0,0,.28); --elev-float:0 12px 40px rgba(0,0,0,.14);
  --focus-ring:2px solid var(--accent); --focus-offset:2px; --dur:.15s; --ease:ease; --hover-scale:1.03;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#1a1d22; --text:#f1f3f5; --muted:rgba(241,243,245,.6); --faint:rgba(241,243,245,.42);
    --border:rgba(255,255,255,.12); --accent:#5ba3ff; --accent-ink:#0c1626; --accent-soft:rgba(91,163,255,.16);
    --success:#35c07b; --success-soft:rgba(53,192,123,.16); --danger:#ff6369; --danger-soft:rgba(255,99,105,.16);
    --warn:#e0b13c; --warn-soft:rgba(224,177,60,.16); --card:#21252b; --surface:#23272e; --scrim:rgba(0,0,0,.5);
    --elev:0 1px 2px rgba(0,0,0,.35); --elev-float:0 12px 40px rgba(0,0,0,.3);
  }
}
[data-theme="dark"]{
  --bg:#1a1d22; --text:#f1f3f5; --muted:rgba(241,243,245,.6); --faint:rgba(241,243,245,.42);
  --border:rgba(255,255,255,.12); --accent:#5ba3ff; --accent-ink:#0c1626; --accent-soft:rgba(91,163,255,.16);
  --success:#35c07b; --success-soft:rgba(53,192,123,.16); --danger:#ff6369; --danger-soft:rgba(255,99,105,.16);
  --warn:#e0b13c; --warn-soft:rgba(224,177,60,.16); --card:#21252b; --surface:#23272e; --scrim:rgba(0,0,0,.5);
  --elev:0 1px 2px rgba(0,0,0,.35); --elev-float:0 12px 40px rgba(0,0,0,.3);
}

/* ==== legal page ==== */
/* Layout + type for the prerendered legal pages (privacy/offer/consent).
   Pure static: no @client component reads these, only the browser applies
   them to the server-rendered HTML — same tokens as web/, distinct file
   (site.css vs styles.css) so merging the two packages' build output never
   collides (Task 6, build-all.sh). */
.doc { max-width: 820px; margin: 0 auto; padding: var(--sp-8) var(--sp-6); }

.doc .back {
  display: inline-block; margin-bottom: var(--sp-6);
  color: var(--link); font: var(--w-medium) var(--fz-ui) var(--font-ui);
  text-decoration: none;
}
.doc .back:hover { text-decoration: underline; }
.doc .back:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

.doc h1 {
  font: var(--w-bold) var(--fz-h1) var(--font-ui); line-height: var(--lh-heading);
  color: var(--text-body); margin: 0 0 var(--sp-6);
}
.doc h2 {
  font: var(--w-semibold) var(--fz-h2) var(--font-ui); line-height: var(--lh-heading);
  color: var(--text-body); margin: var(--sp-7) 0 var(--sp-3);
}
.doc p {
  font: var(--w-regular) var(--fz-body) var(--font-ui); line-height: var(--lh-body);
  color: var(--text-body); margin: 0 0 var(--sp-4); white-space: pre-line;
}
.doc a { color: var(--link); }
.doc a:hover { text-decoration: underline; }

.doc .requisites {
  background: var(--surface-sunken); border: var(--bw-hair) solid var(--border-hair);
  border-radius: var(--r-card); padding: var(--sp-4); margin-top: var(--sp-6);
  font-size: var(--fz-sm); color: var(--text-muted); white-space: pre-line;
}