/* А-Вет design tokens and reusable primitives */
:root {
  /* Brand palette */
  --color-brand-50: #eef5ff;
  --color-brand-100: #dceaff;
  --color-brand-200: #b9d5ff;
  --color-brand-300: #8ec0fb;
  --color-brand-400: #61a1f5;
  --color-brand-500: #3478ef;
  --color-brand-600: #2461d3;
  --color-brand-700: #1e4da8;
  --color-brand-800: #193f86;
  --color-brand-900: #15366e;

  --color-ink: #102b4e;
  --color-text: #253b53;
  --color-muted: #52657c;
  --color-line: #dce6ee;
  --color-surface: #ffffff;
  --color-background: #fffaf2;
  --color-sand: #f4eadc;
  --color-sky: #8ec8f8;
  --color-coral: #ef9878;
  --color-success: #4b9d82;

  /* Backward-compatible semantic aliases used by page components */
  --ink: var(--color-ink);
  --blue: var(--color-brand-600);
  --sky: var(--color-sky);
  --pale: var(--color-brand-50);
  --cream: var(--color-background);
  --sand: var(--color-sand);
  --coral: var(--color-coral);
  --white: var(--color-surface);
  --muted: var(--color-muted);
  --line: var(--color-line);
  --green: var(--color-success);

  /* Typography: fluid, but capped to predictable desktop sizes */
  --font-sans: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-heading: "Rubik", "Montserrat", ui-sans-serif, system-ui, sans-serif;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: clamp(1.0625rem, 1vw + 0.75rem, 1.1875rem);
  --text-h6: 1rem;
  --text-h5: 1.125rem;
  --text-h4: clamp(1.25rem, 1.2vw + 0.85rem, 1.5rem);
  --text-h3: clamp(1.5rem, 1.8vw + 0.9rem, 2rem);
  --text-h2: clamp(2rem, 2.6vw + 1rem, 2.75rem);
  --text-h1: clamp(2.5rem, 3.4vw + 1rem, 3.5rem);
  --text-hero: clamp(2.625rem, 3.8vw + 0.8rem, 3.75rem);

  --leading-tight: 1.08;
  --leading-heading: 1.15;
  --leading-body: 1.6;
  --tracking-tight: -0.035em;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Layout: Bootstrap-like breakpoints with a wider xxl container */
  --container-max: 1440px;
  --container-gutter: clamp(1.25rem, 3vw, 3rem);
  --container-gutter-mobile: 1rem;
  --grid-columns: 12;
  --grid-gap: clamp(1rem, 2vw, 1.75rem);

  /* Shape and elevation */
  --radius-sm: 0.75rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2rem;
  --radius-pill: 999px;
  --shadow-sm: 0 8px 24px rgba(20, 58, 89, 0.08);
  --shadow-md: 0 18px 48px rgba(20, 58, 89, 0.12);
  --shadow-lg: 0 24px 70px rgba(20, 58, 89, 0.15);
  --shadow: var(--shadow-md);
  --radius: var(--radius-xl);

  --transition-fast: 160ms ease;
  --transition-base: 240ms ease;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--color-text);
  background: var(--color-background);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

button, input, textarea, select { font: inherit; }
img, svg { display: block; max-width: 100%; }
a { color: var(--color-brand-700); text-decoration: none; }
a:hover { color: var(--color-brand-700); }
:where(a, button, input, textarea, select):focus-visible {
  outline: 3px solid var(--color-brand-300);
  outline-offset: 3px;
  border-radius: 4px;
}

h1, h2, h3, h4, h5, h6, p { margin-top: 0; }
h1, h2, h3, h4, h5, h6 { color: var(--color-ink); font-family: var(--font-heading); font-weight: 700; letter-spacing: var(--tracking-tight); }
h1 { font-size: var(--text-h1); line-height: var(--leading-tight); margin-bottom: var(--space-6); }
h2 { font-size: var(--text-h2); line-height: var(--leading-tight); margin-bottom: var(--space-5); }
h3 { font-size: var(--text-h3); line-height: var(--leading-heading); margin-bottom: var(--space-4); }
h4 { font-size: var(--text-h4); line-height: var(--leading-heading); margin-bottom: var(--space-3); }
h5 { font-size: var(--text-h5); line-height: var(--leading-heading); margin-bottom: var(--space-3); }
h6 { font-size: var(--text-h6); line-height: var(--leading-heading); margin-bottom: var(--space-2); }
p { margin-bottom: var(--space-4); }
.lead { max-width: 42rem; color: var(--color-muted); font-size: var(--text-lg); line-height: 1.55; }
.text-sm { font-size: var(--text-sm); }
.text-muted { color: var(--color-muted); }

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-gutter);
}
.container-narrow { max-width: 960px; }
.grid { display: grid; gap: var(--grid-gap); }
.grid-12 { grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr)); }
.col-12 { grid-column: span 12; }
.col-8 { grid-column: span 8; }
.col-6 { grid-column: span 6; }
.col-4 { grid-column: span 4; }
.col-3 { grid-column: span 3; }

.btn {
  min-height: 48px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 0.8125rem 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  color: var(--color-ink);
  background: var(--color-surface);
  font-weight: 750;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--transition-base), background var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { color: white; background: var(--color-brand-600); box-shadow: 0 12px 28px rgba(36, 97, 211, 0.22); }
.btn-primary:hover { color: white; background: var(--color-brand-700); }
.btn-secondary { color: var(--color-brand-700); background: var(--color-brand-50); border-color: var(--color-brand-200); }
.btn-light { color: var(--color-ink); background: white; box-shadow: var(--shadow-sm); }
.btn-ghost { background: transparent; border-color: var(--color-line); }
.btn-link { min-height: auto; padding: 0; color: var(--color-brand-600); background: transparent; border: 0; border-radius: 0; }

.brand-logo { width: auto; height: 54px; object-fit: contain; }
.icon { width: 1.15em; height: 1.15em; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.skip-link { position: fixed; z-index: 200; top: 10px; left: 10px; padding: 10px 14px; color: white; background: var(--color-ink); border-radius: var(--radius-sm); transform: translateY(-150%); transition: transform var(--transition-fast); }
.skip-link:focus { color: white; transform: translateY(0); }

@media (max-width: 991px) {
  .col-8, .col-6, .col-4, .col-3 { grid-column: span 12; }
}

@media (max-width: 640px) {
  :root {
    --text-hero: 2.25rem;
    --text-h1: 2.125rem;
    --text-h2: 1.875rem;
    --text-h3: 1.5rem;
  }
  .container { padding-inline: var(--container-gutter-mobile); }
  .brand-logo { height: 43px; }
}