@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/open-sans-400.ttf") format("truetype");
}

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/open-sans-600.ttf") format("truetype");
}

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/open-sans-700.ttf") format("truetype");
}

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/open-sans-800.ttf") format("truetype");
}

@font-face {
  font-family: "Passion One";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/passion-one-400.ttf") format("truetype");
}

@font-face {
  font-family: "Passion One";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/passion-one-700.ttf") format("truetype");
}

@font-face {
  font-family: "Passion One";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/passion-one-900.ttf") format("truetype");
}

@font-face {
  font-family: "Syne";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/syne-800.ttf") format("truetype");
}

:root {
  --bg-dark: #121315;
  --bg-light: #f5f2e8;
  --bg-white: #ffffff;
  --color-accent: #6e2a2a;
  --color-accent-deep: #6e2a2a;
  --color-ink: #222523;
  --color-muted: #4a4844;
  --color-line: #e4e1da;
  --color-wine: #6e2a2a;
  --color-beige: #f5f2e8;
  --font-display: "Syne", sans-serif;
  --font-giant: "Syne", sans-serif;
  --font-body: "Open Sans", sans-serif;
  --header-height: 88px;
  --touch-min: 44px;
  --radius-canvas: 28px;
  --radius-pill: 40px;
  --radius-soft: 20px;
  --pad-x: clamp(1.15rem, 3.6vw, 3.25rem);
  --section-y: clamp(1.6rem, 3.2vw, 2.6rem);
  --section-gap: clamp(0.75rem, 1.4vw, 1.1rem);
  --max-wide: 1440px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 768px) {
  :root {
    --header-height: 96px;
  }
}