/* ============================================================
   Тесто Место — Colors & Type
   Тёплая, домашняя палитра + рукописные акценты + Manrope
   ============================================================ */

/* Webfonts: используем подключение Manrope из Google Fonts и системные fallback-шрифты.
   Локальные TTF-файлы не включены в публичную сборку. */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  /* ─── Brand palette ─────────────────────────────────────── */
  --tm-cream:        #f5ecd9;   /* основной фон — бумага/лен */
  --tm-cream-soft:   #faf3e3;   /* подложки карточек */
  --tm-cream-deep:   #ecdfc2;   /* hover на cream поверхности */
  --tm-paper:        #fff8e9;   /* самый светлый — модалки, поповеры */

  --tm-red:          #d4322a;   /* фирменный — кнопки, логотип, цена */
  --tm-red-deep:     #b3271f;   /* hover/press для red */
  --tm-red-soft:     #f4dad6;   /* фон бейджей "горячее" */

  --tm-wood:         #6e4423;   /* тёмное дерево — заголовки на крем */
  --tm-wood-deep:    #4a2d17;   /* самый тёмный текст */
  --tm-wood-soft:    #8b5e36;   /* second-level text */

  --tm-ochre:        #caa451;   /* охра — пшеница, разделители, акцент */
  --tm-ochre-deep:   #a8862f;   /* hover для охры */
  --tm-ochre-soft:   #ecd9a3;   /* фон тэгов */

  --tm-green:        #5a7a3a;   /* зелень — "веган", "свежее" */
  --tm-green-soft:   #dfe6cf;

  /* ─── Semantic foreground/background ─────────────────────── */
  --fg-1: var(--tm-wood-deep);  /* основной текст */
  --fg-2: var(--tm-wood);       /* second-level */
  --fg-3: var(--tm-wood-soft);  /* third-level / labels */
  --fg-mute: #a08868;           /* placeholder, captions */
  --fg-inv: var(--tm-cream);    /* на тёмном/красном */

  --bg-1: var(--tm-cream);      /* основной */
  --bg-2: var(--tm-cream-soft); /* карточки */
  --bg-3: var(--tm-paper);      /* выше карточек — модалки */

  --accent: var(--tm-red);
  --accent-press: var(--tm-red-deep);

  --line:        rgba(110, 68, 35, 0.14);   /* тонкие разделители */
  --line-strong: rgba(110, 68, 35, 0.28);

  /* ─── Type families ──────────────────────────────────────── */
  --font-hand:    'Segoe Print', 'Comic Sans MS', cursive;          /* рукописные акценты — вывеска */
  --font-hand-alt:'Segoe Script', 'Comic Sans MS', cursive;        /* тонкий рукописный — цитаты */
  --font-display: 'Manrope', system-ui, sans-serif;                /* фирменные заголовки */
  --font-body:    'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* ─── Radii ──────────────────────────────────────────────── */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* ─── Shadows — мягкие, тёплые ───────────────────────────── */
  --shadow-1: 0 1px 2px rgba(74, 45, 23, 0.06);
  --shadow-2: 0 4px 14px rgba(74, 45, 23, 0.08);
  --shadow-3: 0 12px 32px rgba(74, 45, 23, 0.12);
  --shadow-lift: 0 18px 40px -12px rgba(74, 45, 23, 0.22);

  /* ─── Spacing scale (8pt-ish, but warm) ─────────────────── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  /* ─── Motion ─────────────────────────────────────────────── */
  --ease-warm:  cubic-bezier(.2, .8, .2, 1);
  --ease-press: cubic-bezier(.4, 0, .6, 1);
  --dur-fast:   140ms;
  --dur-base:   240ms;
  --dur-slow:   420ms;
}

/* ============================================================
   Base + semantic type
   ============================================================ */
html, body {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.tm-h1, h1.tm {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(36px, 6vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--fg-1);
}

.tm-h2, h2.tm {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--fg-1);
}

.tm-h3, h3.tm {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.2;
  color: var(--fg-1);
}

.tm-h4, h4.tm {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  color: var(--fg-1);
}

.tm-lead {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 19px;
  line-height: 1.45;
  color: var(--fg-2);
}

.tm-body, p.tm {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  color: var(--fg-2);
}

.tm-small {
  font-size: 14px;
  line-height: 1.45;
  color: var(--fg-3);
}

.tm-caption {
  font-size: 12px;
  line-height: 1.35;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.tm-hand {                  /* «как от руки» — для тёплых акцентов */
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: 28px;
  line-height: 1;
  color: var(--tm-red);
  transform: rotate(-2deg);
  display: inline-block;
}

.tm-price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--tm-red);
  font-variant-numeric: tabular-nums;
}

.tm-mono {                  /* для номера заказа, кода и т.п. */
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 14px;
  letter-spacing: 0.02em;
}