/* =====================================================
   ДомОко — Design System tokens
   ===================================================== */
@import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700;800&display=swap');

:root {
  /* ----- Colour palette ----- */
  --c-page:        #EEF3FC;   /* page background */
  --c-surface:     #FFFFFF;   /* solid white surfaces */
  --c-soft:        #D7E4FA;   /* pale blue cards */
  --c-soft-2:      #C6D7F4;   /* slightly deeper pale blue */
  --c-primary:     #1F73F0;   /* brand blue – CTAs, accent fills */
  --c-primary-600: #155CCC;
  --c-primary-50:  #E4EEFD;
  --c-ink:         #0E1B33;   /* primary text */
  --c-ink-2:       #4A5775;   /* secondary text */
  --c-ink-3:       #8E99B2;   /* tertiary text / hints */
  --c-line:        #D5DDED;   /* hairlines, dividers */
  --c-night:       #14161D;   /* dark feature card */
  --c-night-2:     #20232C;
  --c-accent-warm: #E94E33;   /* used for barrier illustration only */
  --c-success:     #1FB16B;

  /* ----- Radii ----- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-pill: 999px;

  /* ----- Shadows ----- */
  --sh-1: 0 1px 2px rgba(14, 27, 51, 0.04);
  --sh-2: 0 8px 24px -8px rgba(28, 70, 150, 0.18);
  --sh-3: 0 24px 60px -24px rgba(28, 70, 150, 0.28);

  /* ----- Type ----- */
  --font: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-display: clamp(40px, 4.4vw, 64px);
  --fs-h1: clamp(32px, 3.2vw, 44px);
  --fs-h2: clamp(26px, 2.4vw, 34px);
  --fs-h3: 22px;
  --fs-h4: 18px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-micro: 12px;

  /* ----- Spacing scale ----- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  /* ----- Layout ----- */
  --container: 1240px;
  --gap: 20px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--c-page);
  color: var(--c-ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a {
  color: var(--c-primary);
  text-decoration: none;
}
a:hover { color: var(--c-primary-600); }

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

/* =====================================================
   Reusable components
   ===================================================== */

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  padding: 0 28px;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
  transition: transform .12s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--c-primary);
  color: #fff;
}
.btn--primary:hover { background: var(--c-primary-600); color: #fff; }

.btn--outline {
  background: transparent;
  color: var(--c-primary);
  border: 1.5px solid var(--c-primary);
}
.btn--outline:hover {
  background: var(--c-primary);
  color: #fff;
}

.btn--ghost {
  background: transparent;
  color: var(--c-ink);
}
.btn--ghost:hover { color: var(--c-primary); }

.btn--pill-white {
  background: #fff;
  color: var(--c-primary);
  box-shadow: var(--sh-1);
}

.btn--sm { height: 40px; padding: 0 18px; font-size: 14px; }
.btn--lg { height: 60px; padding: 0 34px; font-size: 17px; }

/* circle icon button (carousel arrow etc.) */
.icon-btn {
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  background: #fff;
  color: var(--c-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sh-2);
  transition: transform .12s ease, background .15s;
}
.icon-btn:hover { background: var(--c-primary); color: #fff; transform: scale(1.04); }

/* ---- Cards ---- */
.card {
  border-radius: var(--r-xl);
  background: var(--c-surface);
  padding: 28px;
}
.card--soft { background: var(--c-soft); }
.card--primary { background: var(--c-primary); color: #fff; }
.card--night { background: var(--c-night); color: #fff; }

/* ---- Pill chips ---- */
.chip {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  background: #fff;
  color: var(--c-ink);
  font-size: 13px;
  font-weight: 500;
}

/* ---- Inputs ---- */
.input {
  width: 100%;
  height: 56px;
  padding: 0 22px;
  background: #fff;
  border-radius: var(--r-pill);
  border: none;
  color: var(--c-ink);
  font-size: 16px;
  font-family: inherit;
  outline: none;
}
.input::placeholder { color: var(--c-ink-3); }

/* ---- Layout helpers ---- */
.row { display: flex; gap: var(--gap); }
.grid { display: grid; gap: var(--gap); }
.stack { display: flex; flex-direction: column; gap: var(--gap); }

/* ---- Eyebrow / overline ---- */
.eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-primary);
}

/* ---- Section headings ---- */
.h-section {
  font-size: var(--fs-h2);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 32px;
}
.h-display {
  font-size: var(--fs-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.02;
  margin: 0;
}