:root {
  --primary: #272425;
  --primary-dark: #1a1818;
  --primary-light: #3d3839;

  --secondary: #dac3ac;
  --secondary-dark: #c7ac8e;
  --secondary-light: #ead9c8;
  --white: #fff;
  --black: #000;
  --accent: #c5a78f;
  --accent-dark: #b08e72;

  --base-light: #ffffff;
  --base-dark: #272425;

  --text: var(--primary);
  --text-on-dark: #f5f1ec;
  --text-muted: #6b6462;

  --card: #ffffff;
  --border-color: #d8cdbf;
  --border-color-on-dark: rgba(245, 241, 236, 0.25);
  --divider: #8e7467;

  --space-xs: 0.5rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2.5rem;
  --space-xl: 4rem;
  --space-xxl: 6rem;

  --section-space-s: 3rem;
  --section-space-m: 5rem;
  --section-space-l: 8rem;
  --section-space-xxl: 12rem;

  --grid-gap: var(--space-l);
  --gutter: var(--space-m);

  --font-heading: "Bebas Neue", sans-serif;
  --font-body: "Inter", sans-serif;

  --text-xs: clamp(0.633rem, 0.773rem - 0.164vw, 0.694rem);
  --text-s: clamp(0.833rem, 0.820rem + 0.028vw, 0.844rem);
  --text-m: clamp(1rem, 0.839rem + 0.334vw, 1.125rem);
  --text-l: clamp(1.2rem, 0.815rem + 0.802vw, 1.5rem);
  --text-xl: clamp(1.44rem, 0.722rem + 1.496vw, 1.999rem);
  --text-xxl: clamp(1.728rem, 0.525rem + 2.505vw, 2.664rem);

  --h1: clamp(3.45rem, 1.459rem + 4.147vw, 5rem);
  --h2: clamp(3rem, 1.715rem + 2.676vw, 4rem);
  --h3: clamp(2.5rem, 1.858rem + 1.338vw, 3rem);

  --letter-spacing-heading: 0.06em;
  --letter-spacing-wide: 0.12em;

  --line-height-heading: calc(4px + 1.3ex);
  --line-height-text: calc(6px + 2ex);

  --radius-none: 0px;
  --radius-s: 2px;

  --shadow-card: 0 2px 4px rgba(23, 21, 21, 0.06), 0 16px 32px -12px rgba(23, 21, 21, 0.28);
  --shadow-card-featured: 0 2px 4px rgba(23, 21, 21, 0.06), 0 20px 40px -12px rgba(23, 21, 21, 0.35),
    0 0 28px 0 color-mix(in srgb, var(--accent) 40%, transparent);

  --btn-padding-block: 1em;
  --btn-padding-inline: 2em;
  --btn-border-radius: var(--radius-none);
  --btn-font-size: var(--text-s);
  --btn-letter-spacing: var(--letter-spacing-wide);

  --content-width: 1366px;
  --width-l: 60rem;

  --breakpoint-l: 999px;
  --breakpoint-s: 768px;
  --breakpoint-xs: 380px;
}

@font-face {
  font-family: "Bebas Neue";
  src: url("../assets/fonts/BebasNeue_Book.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Bebas Neue";
  src: url("../assets/fonts/BebasNeue_Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Bebas Neue";
  src: url("../assets/fonts/BebasNeue_Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter_18pt-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter_18pt-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter_18pt-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter_24pt-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}