/* ============================================================
   СайтБолит — Colors & Type Foundations
   ============================================================
   Warm, friendly pet-care palette. Soft green primary,
   amber/coral semantic states, cream backgrounds.
   Display type is rounded (Nunito); body is clean (Inter).
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ─── Brand palette ──────────────────────────────────────── */
  /* Primary: "Здоровый" green — warm, slightly desaturated.
     Avoids the cold corporate teal trap. */
  --sb-green-50:  #EEF8F0;
  --sb-green-100: #D6EFDC;
  --sb-green-200: #ABDEB9;
  --sb-green-300: #7FCC95;
  --sb-green-400: #5BBE7B;
  --sb-green-500: #3FAB62;   /* primary brand green */
  --sb-green-600: #2F8F4F;
  --sb-green-700: #246E3D;
  --sb-green-800: #1B5430;
  --sb-green-900: #133D23;

  /* Warm cream — page background. Not pure white. */
  --sb-cream-50:  #FDFBF6;
  --sb-cream-100: #F8F4EC;
  --sb-cream-200: #F0EADD;
  --sb-cream-300: #E5DCC8;

  /* Warm neutral / "ink" — text + structure. Charcoal w/ a hint of olive,
     never pure black. */
  --sb-ink-50:  #F4F3EF;
  --sb-ink-100: #E6E4DD;
  --sb-ink-200: #C9C6BC;
  --sb-ink-300: #A4A096;
  --sb-ink-400: #767369;
  --sb-ink-500: #4D4B43;
  --sb-ink-600: #36352F;
  --sb-ink-700: #25241F;
  --sb-ink-800: #1A1A16;

  /* ─── Semantic state palette ─────────────────────────────── */
  /* Healthy 🟢 — same as green-500 (primary doubles as health) */
  --sb-status-healthy-bg:    var(--sb-green-100);
  --sb-status-healthy-fg:    var(--sb-green-700);
  --sb-status-healthy-solid: var(--sb-green-500);

  /* Has questions 🟡 — warm amber, not lemon */
  --sb-amber-50:    #FEF6E5;
  --sb-amber-100:   #FBE7B8;
  --sb-amber-200:   #F7D27A;
  --sb-amber-400:   #F2B638;
  --sb-amber-500:   #E89A14;
  --sb-amber-700:   #8E5C00;
  --sb-status-warn-bg:    var(--sb-amber-100);
  --sb-status-warn-fg:    var(--sb-amber-700);
  --sb-status-warn-solid: var(--sb-amber-400);

  /* Sick 🔴 — warm coral red, not alarm-bell red */
  --sb-coral-50:   #FDEEEC;
  --sb-coral-100:  #FAD3CD;
  --sb-coral-200:  #F4A99F;
  --sb-coral-400:  #EA7264;
  --sb-coral-500:  #DD5444;
  --sb-coral-700:  #962D21;
  --sb-status-sick-bg:    var(--sb-coral-100);
  --sb-status-sick-fg:    var(--sb-coral-700);
  --sb-status-sick-solid: var(--sb-coral-400);

  /* Soft accent — periwinkle for "info" / Telegram-style chips.
     Used sparingly. */
  --sb-sky-100: #DDEAF7;
  --sb-sky-500: #5A93D6;
  --sb-sky-700: #2D5A8F;

  /* ─── Foreground / background semantic tokens ────────────── */
  --sb-bg:           var(--sb-cream-50);   /* page */
  --sb-bg-soft:      var(--sb-cream-100);  /* alt section */
  --sb-bg-card:      #FFFFFF;              /* cards float on cream */
  --sb-bg-sunken:    var(--sb-cream-200);  /* inputs, wells */
  --sb-bg-hover:     rgba(36, 110, 61, 0.06);

  --sb-fg:           var(--sb-ink-700);    /* default text */
  --sb-fg-strong:    var(--sb-ink-800);    /* headlines */
  --sb-fg-muted:     var(--sb-ink-400);    /* meta, captions */
  --sb-fg-subtle:    var(--sb-ink-300);    /* placeholder */
  --sb-fg-onbrand:   #FFFFFF;              /* text on green */

  --sb-border:       var(--sb-ink-100);
  --sb-border-soft:  var(--sb-cream-300);
  --sb-border-strong:var(--sb-ink-200);

  /* ─── Radii — generous, rounded ──────────────────────────── */
  --sb-radius-xs:  6px;
  --sb-radius-sm:  10px;
  --sb-radius-md:  14px;   /* default */
  --sb-radius-lg:  20px;
  --sb-radius-xl:  28px;
  --sb-radius-2xl: 36px;   /* hero / pet card */
  --sb-radius-pill: 999px;

  /* ─── Shadows — soft, warm, layered. Never gray. ─────────── */
  --sb-shadow-xs:   0 1px 2px rgba(36, 50, 30, 0.04);
  --sb-shadow-sm:   0 2px 6px rgba(36, 50, 30, 0.05),
                    0 1px 2px rgba(36, 50, 30, 0.04);
  --sb-shadow-md:   0 6px 20px rgba(36, 50, 30, 0.07),
                    0 2px 6px rgba(36, 50, 30, 0.04);
  --sb-shadow-lg:   0 18px 40px rgba(36, 50, 30, 0.10),
                    0 4px 12px rgba(36, 50, 30, 0.06);
  --sb-shadow-glow: 0 0 0 6px rgba(63, 171, 98, 0.15);

  /* Inner highlight — subtle top edge on cards / buttons */
  --sb-shadow-inset-hi: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* ─── Spacing scale (8pt with a half-step) ───────────────── */
  --sb-space-1: 4px;
  --sb-space-2: 8px;
  --sb-space-3: 12px;
  --sb-space-4: 16px;
  --sb-space-5: 20px;
  --sb-space-6: 24px;
  --sb-space-8: 32px;
  --sb-space-10: 40px;
  --sb-space-12: 48px;
  --sb-space-16: 64px;
  --sb-space-20: 80px;
  --sb-space-24: 96px;

  /* ─── Motion ─────────────────────────────────────────────── */
  --sb-ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --sb-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* gentle bounce */
  --sb-ease-soft:   cubic-bezier(0.4, 0.0, 0.2, 1);
  --sb-dur-fast:   140ms;
  --sb-dur-base:   220ms;
  --sb-dur-slow:   420ms;

  /* ─── Type families ──────────────────────────────────────── */
  --sb-font-display: "Nunito", ui-rounded, "SF Pro Rounded",
                     "Helvetica Neue", system-ui, sans-serif;
  --sb-font-body:    "Inter", ui-sans-serif, system-ui, sans-serif;
  --sb-font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ─── Type scale (responsive-ready) ──────────────────────── */
  --sb-text-xs:   12px;
  --sb-text-sm:   14px;
  --sb-text-base: 16px;
  --sb-text-md:   18px;
  --sb-text-lg:   20px;
  --sb-text-xl:   24px;
  --sb-text-2xl:  30px;
  --sb-text-3xl:  38px;
  --sb-text-4xl:  48px;
  --sb-text-5xl:  64px;
  --sb-text-6xl:  84px;
}

/* ─── Base reset / page defaults ────────────────────────────── */
html, body {
  background: var(--sb-bg);
  color: var(--sb-fg);
  font-family: var(--sb-font-body);
  font-size: var(--sb-text-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ─── Semantic typography ───────────────────────────────────── */
.sb-display, .sb-h0 {
  font-family: var(--sb-font-display);
  font-weight: 800;
  font-size: clamp(48px, 6vw, 84px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--sb-fg-strong);
}

.sb-h1, h1 {
  font-family: var(--sb-font-display);
  font-weight: 800;
  font-size: var(--sb-text-4xl);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--sb-fg-strong);
}

.sb-h2, h2 {
  font-family: var(--sb-font-display);
  font-weight: 700;
  font-size: var(--sb-text-3xl);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--sb-fg-strong);
}

.sb-h3, h3 {
  font-family: var(--sb-font-display);
  font-weight: 700;
  font-size: var(--sb-text-2xl);
  line-height: 1.2;
  color: var(--sb-fg-strong);
}

.sb-h4, h4 {
  font-family: var(--sb-font-display);
  font-weight: 700;
  font-size: var(--sb-text-xl);
  line-height: 1.3;
  color: var(--sb-fg-strong);
}

.sb-h5, h5 {
  font-family: var(--sb-font-display);
  font-weight: 700;
  font-size: var(--sb-text-lg);
  line-height: 1.35;
  color: var(--sb-fg-strong);
}

.sb-lede {
  font-family: var(--sb-font-body);
  font-weight: 400;
  font-size: var(--sb-text-md);
  line-height: 1.55;
  color: var(--sb-fg);
}

.sb-body, p {
  font-family: var(--sb-font-body);
  font-weight: 400;
  font-size: var(--sb-text-base);
  line-height: 1.55;
  color: var(--sb-fg);
  text-wrap: pretty;
}

.sb-small {
  font-size: var(--sb-text-sm);
  line-height: 1.5;
  color: var(--sb-fg);
}

.sb-meta {
  font-family: var(--sb-font-body);
  font-weight: 500;
  font-size: var(--sb-text-xs);
  line-height: 1.4;
  color: var(--sb-fg-muted);
  letter-spacing: 0.02em;
}

.sb-eyebrow {
  font-family: var(--sb-font-body);
  font-weight: 700;
  font-size: var(--sb-text-xs);
  line-height: 1.2;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--sb-green-600);
}

.sb-mono, code, kbd {
  font-family: var(--sb-font-mono);
  font-size: 0.92em;
  background: var(--sb-bg-sunken);
  padding: 0.1em 0.35em;
  border-radius: var(--sb-radius-xs);
  color: var(--sb-ink-600);
}

/* ─── Reusable utility primitives ───────────────────────────── */
.sb-card {
  background: var(--sb-bg-card);
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius-lg);
  box-shadow: var(--sb-shadow-sm);
}

.sb-card-elevated {
  background: var(--sb-bg-card);
  border-radius: var(--sb-radius-xl);
  box-shadow: var(--sb-shadow-md), var(--sb-shadow-inset-hi);
}

/* Status pill — the 1-second-readable health indicator */
.sb-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  border-radius: var(--sb-radius-pill);
  font-family: var(--sb-font-display);
  font-weight: 700;
  font-size: var(--sb-text-sm);
  line-height: 1;
}
.sb-pill::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.9;
}
.sb-pill--healthy { background: var(--sb-status-healthy-bg); color: var(--sb-status-healthy-fg); }
.sb-pill--warn    { background: var(--sb-status-warn-bg);    color: var(--sb-status-warn-fg); }
.sb-pill--sick    { background: var(--sb-status-sick-bg);    color: var(--sb-status-sick-fg); }