/* ============================================================================
   tokens.css — общие дизайн-токены платформы.
   Извлечены из client/design/drops-*.html (Exaggerated Minimalism / «смелый
   современный»: крупная типографика 800, высокий контраст, воздух, флэт,
   SVG-иконки, НЕ эмодзи). Шрифт Onest — self-hosted.

   ИСПОЛЬЗУЕТСЯ ОБОИМИ: и клиентом (client/app/), и админкой (admin/).

   --- РАСПОЛОЖЕНИЕ ШРИФТОВ (важно для путей @font-face) ---
   Канонический источник:   client/app/fonts/onest-*.woff2
   На проде они доступны по: /s/_assets/fonts/onest-*.woff2  (см. multitenant.conf)
   и по                      /admin/fonts/onest-*.woff2
   Поэтому @font-face ниже ссылается на относительный ./fonts/*, а каждый
   шелл (client/app/index.html и admin/index.html) грузит tokens.css из своей
   директории, рядом с которой лежат fonts/. Подробнее — в CONTRACT.md.
   ========================================================================== */

@font-face {
  font-family: 'Onest';
  src: url('./fonts/onest-cyrillic.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0400-04FF, U+0500-052F, U+2DE0-2DFF, U+A640-A69F,
                 U+1C80-1C88, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Onest';
  src: url('./fonts/onest-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2013-2014,
                 U+2018-2019, U+201C-201D, U+2022, U+2212;
}

:root {
  /* --- база: warm-black + paper --- */
  --ink: #161410;          /* warm-black, основной текст и инверсные плашки */
  --paper: #F4F2EC;        /* бумажный фон */
  --surface: #FBFAF6;      /* приподнятая поверхность (тикеты, поля) */
  --muted: #5F5B52;        /* вторичный текст */
  --line: #E2DED3;         /* разделители, границы */

  /* --- единственный инжектируемый акцент --- */
  /* Бизнес задаёт brand_color; шелл пишет его в --brand на :root.
     Дефолт ниже = #E5481F. Красит ВСЕ акценты. */
  --brand: #E5481F;
  --brand-ink: #ffffff;    /* текст на брендовой заливке */

  /* --- геометрия --- */
  --r: 22px;               /* радиус крупных карточек */
  --r-card: 20px;
  --r-btn: 16px;
  --r-pill: 100px;

  /* --- типографика --- */
  --font: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: var(--font);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }

/* ---- ТИПОГРАФИКА-ПРИМИТИВЫ ---- */
.h1 { font-size: 27px; font-weight: 800; letter-spacing: -.03em; }
.h2 { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.display { font-size: 64px; font-weight: 800; letter-spacing: -.05em; line-height: .9; }
.muted { color: var(--muted); font-weight: 500; }
.eyebrow {
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
}

/* ---- КНОПКИ ---- */
.btn {
  font-family: inherit; font-size: 15px; font-weight: 700;
  border: none; border-radius: var(--r-btn); padding: 15px 18px;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; transition: transform .12s; text-align: center;
}
.btn:active { transform: scale(.99); }
.btn-brand { background: var(--brand); color: var(--brand-ink); }
.btn-ink   { background: var(--ink);   color: var(--paper); }
.btn-ghost { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.btn-block { width: 100%; }

/* пилюля-чип */
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 8px 13px;
  font-size: 12.5px; font-weight: 700;
}
.pill .d { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }

/* ---- КАРТОЧКИ ---- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 18px;
}
/* брендовая «фича»-карточка (главный оффер) */
.card-feat {
  background: var(--brand); color: var(--brand-ink);
  border-radius: var(--r); padding: 22px; position: relative; overflow: hidden;
  transition: transform .12s;
}
.card-feat:active { transform: scale(.99); }
/* инверсная плашка (push-bar и т.п.) */
.card-ink {
  background: var(--ink); color: var(--paper);
  border: none; border-radius: 18px; padding: 16px;
}

/* ---- СПИСКИ (строки, не карточки) ---- */
.list { margin-top: 6px; }
.list-row {
  display: flex; align-items: center; gap: 14px;
  padding: 17px 2px; border-bottom: 1px solid var(--line);
}
.list-row:active { opacity: .6; }
.list-row .rl b { font-size: 16px; font-weight: 700; letter-spacing: -.01em; display: block; }
.list-row .rl span { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.list-row .rl span em { font-style: normal; color: var(--brand); font-weight: 700; }
.list-row .chev { margin-left: auto; color: var(--muted); }
.list-row .chev svg { width: 18px; height: 18px; stroke: var(--muted); fill: none; stroke-width: 2.2; }

/* ---- ПОЛЯ ВВОДА (для админки) ---- */
.field { display: block; margin-bottom: 14px; }
.field .lbl {
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 7px;
}
.input {
  width: 100%; font-family: inherit; font-size: 15px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 13px 15px;
}
.input:focus { outline: none; border-color: var(--ink); }

/* ---- SVG-иконки: тонкая обводка под ink/paper/brand ---- */
.ic { width: 22px; height: 22px; flex-shrink: 0; }
.ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.9; }

@media (prefers-reduced-motion: no-preference) {
  @keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  .rise { animation: rise .5s cubic-bezier(.16, 1, .3, 1) both; }
}