/**
 * v10 design system — CSS variables and base layout
 * Source: new-design/new-homepage.html
 * Load first so other redesign CSS can use these variables.
 */

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

html {
  overflow-x: hidden;
  max-width: 100%;
}

:root {
  /* Единый текст интерфейса (файл шрифта подключается в /dist/css/main.min.css) */
  --font-sans: 'Akrobat', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-roboto: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --navy: #1a2744;
  --navy-light: #243359;
  --blue: #21467d;
  --blue-light: #3b82f6;
  --green: #16a34a;
  --green-light: #22c55e;
  --amber: #FF9800;
  --amber-light: #fbbf24;
  --red: #dc2626;
  --gray-50: #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --white: #ffffff;
  --sidebar-w: 440px;
  --radius: 12px;
  --radius-sm: 8px;

  /* Hero slider (new-homepage.html v10) */
  --hero-green: #4DBA80;
  --hero-navy: #204A87;
  --hero-blue: #3872FF;
  --hero-green2: #4DBA5C;
  --hero-amber: #F4C96C;
  --hero-teal: #14BA8B;
  --hero-sky: #00A0E3;
  /* Hero slide backgrounds — tepsey-banners-with-farmer (20) (1) (2).html */
  --hero-gradient-1: linear-gradient(135deg, #1a3d6e 0%, #2558a8 45%, #1a8bbf 100%);
  --hero-gradient-2: radial-gradient(ellipse at 30% 40%, #4aaa82 0%, #3a9870 40%, #2e8463 75%, #246b52 100%);
  --hero-gradient-3: radial-gradient(ellipse at 18% 10%, #00825e 0%, #0080a8 32%, #1258b0 62%, #1044a0 100%);
}

body {
  font-family: var(--font-sans);
  /* background: var(--gray-100); */
  color: var(--gray-800);
  min-height: 100vh;
  /* overflow-x на body ломает position:sticky у шапки — клип на html */
  overflow-x: visible;
}

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}