/* base.css — design tokens, reset, root layout variables
   Part of 3statewallpaper styles — load order: base -> components -> sections */

/* ===================================================================
   Design tokens (color palette)
   =================================================================== */
:root {
  --brand: #c95127; /* brand orange */
  --brand-dark: #a03d1c; /* brand pressed */
  --brand-light: #f2a678; /* peach accent */
  --ink: #1e2b38; /* primary text / dark */
  --ink-soft: #33414e; /* body text */
  --muted: #54606c; /* muted text */
  --muted-soft: #7d8590; /* faint text */
  --bg: #f4ebdc; /* page background */
  --border: #e7dac6; /* card border */
  --border-soft: #ece1cd; /* hairline divider */
  --slate: #474e58; /* header/footer bg */
  --green: #1eae58; /* whatsapp green */
  --green-dark: #13864a; /* green text */
  --green-light: #43d782; /* green highlight */
}

* {
  box-sizing: border-box;
}
svg {
  display: block;
}
html,
body {
  margin: 0;
  padding: 0;
}
/* защита от горизонтального вылезания на мобилке (фикс-бар, широкий контент).
   На html, а не body — чтобы не сломать position: sticky у шапки. */
html {
  overflow-x: hidden;
}
body {
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* Normal "&" — override only the ampersand glyph (U+0026) so Archivo
   headings use a plain sans ampersand instead of its stylized one.
   Covers Windows/Mac (Arial/Helvetica/Segoe UI), Android (Roboto/Noto
   Sans) and Linux (Liberation/Nimbus/DejaVu). */
@font-face {
  font-family: "AmpSans";
  src: local("Arial"), local("Roboto"), local("Noto Sans"),
    local("Helvetica Neue"), local("Helvetica"), local("Segoe UI"),
    local("Liberation Sans"), local("Arimo"), local("Nimbus Sans"),
    local("DejaVu Sans");
  unicode-range: U+0026;
}
::placeholder {
  color: #9aa0a6;
}
input:focus,
textarea:focus {
  outline: none;
  border-color: var(--brand);
}

:root {
  --navDisp: flex;
  --burgerDisp: none;
  --hPhoneDisp: flex;
  --hero-grid: 1.05fr 0.95fr;
  --btnDir: row;
  --btnAlign: flex-start;
  --cols4: repeat(4, minmax(0, 1fr));
  --cols3: repeat(3, minmax(0, 1fr));
  --formGrid: 0.95fr 1.05fr;
  --fullRoomRaise: translateY(-18px);
  --bodyPadBottom: 0;
  --barDisp: none;
  --chatDisp: flex;
}
@media (max-width: 859px) {
  :root {
    --navDisp: none;
    --burgerDisp: flex;
    --hPhoneDisp: none;
    --hero-grid: 1fr;
    --btnDir: column;
    --btnAlign: stretch;
    --cols4: 1fr;
    --cols3: 1fr;
    --formGrid: 1fr;
    --fullRoomRaise: none;
    --bodyPadBottom: 84px;
    --barDisp: flex;
    --chatDisp: none;
  }
}