/* ============================================================
   WHIEDA Marketplace — Design Tokens
   Основано на /docs/DESIGN_SYSTEM.md
   ============================================================ */

:root {
  /* === ЦВЕТА: изумрудный + песочный + glass === */
  --ink:          #0F5D4B;
  --ink-2:        #0A4438;
  --ink-soft:     #1A6E5A;

  --acc:          #1FA983;
  --acc-2:        #17936E;
  --acc-soft:     #E8F5EF;
  --acc-tint:     rgba(31, 169, 131, 0.14);

  --warm:         #F5D390;
  --warm-soft:    #FEF6E7;
  --coral:        #E8896B;

  --white:        #FFFFFF;
  --paper:        #FDFDF9;
  --mut:          #6B7573;
  --mut-2:        #94A19E;
  --line:         rgba(15, 93, 75, 0.11);
  --bd:           rgba(15, 93, 75, 0.14);

  /* === GLASS === */
  --glass:        rgba(255, 255, 255, 0.78);
  --glass-2:      rgba(255, 255, 255, 0.9);
  --glass-blur:   blur(20px) saturate(1.2);

  /* === ТЕНИ === */
  --sh-xs:  0 2px 8px rgba(15, 93, 75, 0.04);
  --sh:     0 4px 16px rgba(15, 93, 75, 0.06);
  --sh-md:  0 10px 28px rgba(15, 93, 75, 0.10);
  --sh-lg:  0 14px 40px rgba(15, 93, 75, 0.13);
  --sh-acc: 0 6px 18px rgba(31, 169, 131, 0.28);

  /* === РАДИУСЫ === */
  --r-xs: 8px;
  --r-sm: 11px;
  --r:    14px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-full: 999px;

  /* === ФОНЫ === */
  --bg:       linear-gradient(160deg, #F9FBF8 0%, #EEF7F1 100%);
  --bg-solid: #F9FBF8;

  /* === ТИПОГРАФИКА === */
  --fs-heading: 'Manrope', -apple-system, 'Segoe UI', sans-serif;
  --fs-body:    'Manrope', -apple-system, 'Segoe UI', sans-serif;

  /* === LAYOUT === */
  --max-w: 1360px;
  --header-h: 72px;
  --header-h-mobile: 60px;

  /* === ПЕРЕХОДЫ === */
  --tr:      0.22s ease;
  --tr-fast: 0.15s ease;
  --tr-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   БАЗОВЫЕ СБРОСЫ И СТИЛИ
   ============================================================ */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--fs-body);
  color: var(--ink);
  background: var(--bg);
  min-height: 100vh;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1.55;
}

img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
a { color: inherit; text-decoration: none; }

/* ============================================================
   BG BLOBS — воздушный фон
   ============================================================ */

.bg-blobs {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: -1;
  pointer-events: none;
}
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
}
.b1 {
  width: 520px; height: 520px;
  background: #7ECBC7;
  top: -160px; left: -120px;
  opacity: 0.28;
}
.b2 {
  width: 480px; height: 480px;
  background: #F5D390;
  top: 280px; right: -160px;
  opacity: 0.20;
}
.b3 {
  width: 600px; height: 600px;
  background: #A9D8D2;
  bottom: -300px; left: 30%;
  opacity: 0.18;
}

/* ============================================================
   GLASS — универсальный класс для стеклянных панелей
   ============================================================ */

.glass {
  background: var(--glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--bd);
  box-shadow: var(--sh);
  border-radius: var(--r);
}

.glass-2 {
  background: var(--glass-2);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--bd);
  box-shadow: var(--sh);
  border-radius: var(--r);
}

/* ============================================================
   ТИПОГРАФИКА
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--fs-heading);
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

h1 { font-size: clamp(28px, 3.4vw, 42px); font-weight: 800; line-height: 1.1; }
h2 { font-size: clamp(24px, 2.6vw, 32px); font-weight: 800; }
h3 { font-size: clamp(18px, 2vw, 22px); font-weight: 700; }
h4 { font-size: 16px; font-weight: 700; }

p { margin: 0 0 12px; }

/* ============================================================
   КНОПКИ
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: var(--r);
  font-weight: 700;
  font-size: 15px;
  transition: var(--tr);
  border: 1px solid transparent;
  white-space: nowrap;
}

.btn-main {
  background: var(--ink);
  color: var(--white);
  box-shadow: 0 6px 18px rgba(15, 93, 75, 0.22);
}
.btn-main:hover {
  background: var(--ink-2);
  transform: translateY(-1px);
}

.btn-acc {
  background: var(--acc);
  color: var(--white);
  box-shadow: var(--sh-acc);
}
.btn-acc:hover {
  background: var(--acc-2);
  transform: translateY(-1px);
}

.btn-gh {
  background: var(--glass-2);
  border-color: var(--bd);
  color: var(--ink);
  box-shadow: var(--sh);
}
.btn-gh:hover {
  background: var(--white);
  transform: translateY(-1px);
}

.btn-lg { padding: 14px 28px; font-size: 16px; border-radius: var(--r-md); }
.btn-sm { padding: 8px 14px; font-size: 13px; border-radius: var(--r-sm); }

/* ============================================================
   PILLS (микро-теги преимуществ)
   ============================================================ */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r-full);
  font-size: 12px;
  font-weight: 700;
  background: var(--glass);
  border: 1px solid var(--bd);
  box-shadow: 0 4px 14px rgba(15, 93, 75, 0.06);
  color: var(--ink);
}
.pill-acc {
  background: var(--acc-tint);
  border-color: rgba(31, 169, 131, 0.28);
  color: var(--acc-2);
}
.pill-warm {
  background: var(--warm-soft);
  border-color: rgba(245, 211, 144, 0.4);
  color: #8B6914;
}

/* ============================================================
   ACCESSIBILITY / MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

[hidden] { display: none !important; }

/* Focus-visible для клавиатурной навигации */
:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}