/* ============================================================
   КормоРесурс — Design System
   Fundament: tokens + reusable primitives.
   Extend this file as new blocks are added — do not hardcode.
   ============================================================ */

:root {
  /* ---- Brand greens ---- */
  --color-green-950: #14532b; /* tab active / dark forest */
  --color-green-900: #126F40; /* logo mark dark, phone:hover, outlines */
  --color-green-800: #1E6E3C; /* stat highlight card background */
  --color-green-dark: #105E2F; /* ТОП-10 stat card background */
  --color-green-700: #2F7D46; /* button gradient dark stop */
  --color-green-600: #3DA935; /* primary action */
  --color-green-500: #4AA73F; /* button gradient mid */
  --color-green-400: #76C04E; /* logo leaf light, pill light stop */
  --color-green-social: #579C43; /* social circles */
  --color-green-tint: #EAF3E7; /* hover wash */

  /* ---- Wheel / infographic grays ---- */
  --color-wheel-outer: #cfd2d0; /* inactive outer segment */
  --color-wheel-inner: #e1e3e1; /* inactive inner segment */
  --color-wheel-dark: #4d4d4d;  /* active inner arc, darkest */

  /* ---- Neutrals ---- */
  --color-text: #1A1A1A;      /* headings, phone, nav:hover */
  --color-text-muted: #5A5B5A;/* nav links */
  --color-text-subtle: #9A9C9A;/* captions, placeholder */
  --color-white: #FFFFFF;
  --color-bg: #FFFFFF;
  --color-bg-nav: #F1F3F0;    /* nav row band */
  --color-bg-soft: #F6F6F6;   /* rating chip */
  --color-footer: #262626;    /* footer dark background */
  --color-border: #E2E2E2;    /* field + divider borders */

  /* ---- Accents ---- */
  --color-star: #FFB400;      /* rating stars */
  --color-pin: #F5872B;       /* yandex map pin */

  /* ---- Typography ---- */
  --font-sans: 'Cygre', 'Manrope', 'Segoe UI', system-ui, sans-serif;

  --fs-caption: 11px;   --lh-caption: 1.25;
  --fs-sm: 14px;        --lh-sm: 1.35;
  --fs-base: 16px;      --lh-base: 1.45;
  --fs-md: 18px;        --lh-md: 1.3;
  --fs-lg: 20px;        --lh-lg: 1.25;
  --fs-phone: 22px;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* ---- Spacing scale (4pt) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;

  /* ---- Radii ---- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 28px;
  --radius-stat: 24px; /* stat card corners */
  --radius-card: 50px;
  --radius-button: 50px;
  --radius-pill: 999px;

  /* ---- Shadows ---- */
  --shadow-btn: 0 6px 16px rgba(45, 125, 60, 0.28);
  --shadow-pop: 0 12px 32px rgba(0, 0, 0, 0.12);
  --shadow-arrow: 0 4px 14px rgba(0, 0, 0, 0.18);

  /* ---- Cards ---- */
  --color-card: #F2F3F1;      /* product/catalog card background */

  /* ---- Layout / Grid ---- */
  --container-max: 1280px;   /* max content width, site-wide */
  --container-pad: 16px;     /* horizontal page padding — responsive below */
  --gutter: var(--container-pad); /* legacy alias */
  --header-top-h: 92px;
  --header-nav-h: 50px;
  --transition: 160ms ease;
}

@media (min-width: 768px)  { :root { --container-pad: 24px; } }

*, *::before, *::after { box-sizing: border-box; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--color-green-700); text-decoration: none; }
a:hover { color: var(--color-green-900); }

/* ---------- Site grid ----------
   Every top-level section of the homepage aligns to this container:
   same max-width, same responsive gutters. */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* ---------- Reusable primitives ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: inherit;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-md);
  line-height: 1;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: filter var(--transition), transform var(--transition);
}
.btn:hover { filter: brightness(1.05); }
.btn:active { transform: translateY(1px); }

.btn-primary {
  color: var(--color-white);
  background: linear-gradient(135deg, var(--color-green-500) 0%, var(--color-green-700) 100%);
  border-radius: var(--radius-pill);
  padding: 0 var(--space-6);
  height: 44px;
  font-size: var(--fs-sm);
  box-shadow: var(--shadow-btn);
}

/* Search field */
.field {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: 56px;
  padding: 0 var(--space-5);
  background: var(--color-white);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-pill);
}
.field input {
  flex: 1;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: var(--fs-base);
  color: var(--color-text);
  background: transparent;
}
.field input::placeholder { color: var(--color-text-subtle); }