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

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

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

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter/Inter-ExtraBold.woff2") format("woff2");
  font-weight: 800 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lora";
  src: url("../fonts/Lora/Lora.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-heading: "Lora", Georgia, serif;
  --font-body: "Inter", Arial, sans-serif;

  --color-bg: #faf3ea;
  --color-bg-soft: #dde8d8;
  --color-bg-card: #fffdf8;
  --color-bg-deep: #2f3d31;
  --color-bg-deeper: #202920;
  --color-text: #2b2520;
  --color-text-muted: #776b5f;
  --color-text-inverse: #fffdf8;
  --color-green: #526b4e;
  --color-green-dark: #344534;
  --color-green-soft: #edf4e9;
  --color-copper: #b96f45;
  --color-copper-hover: #965636;
  --color-copper-dark: #7f482f;
  --color-copper-soft: #f4dfcf;
  --color-gold: #d5b184;
  --color-border: #e7d7c3;
  --color-border-strong: #cdbb9f;
  --color-white: #ffffff;
  --color-black: #000000;

  --rgb-bg: 250 243 234;
  --rgb-bg-card: 255 253 248;
  --rgb-border: 231 215 195;
  --rgb-border-strong: 205 187 159;
  --rgb-bg-deep: 47 61 49;
  --rgb-text: 43 37 32;
  --rgb-text-inverse: 255 253 248;
  --rgb-green: 82 107 78;
  --rgb-copper: 185 111 69;
  --rgb-gold: 213 177 132;
  --rgb-hero-overlay: 20 14 10;
  --rgb-black: 0 0 0;
  --rgb-white: 255 255 255;

  --container: 1180px;
  --gutter: 24px;
  --radius-xs: 6px;
  --radius-sm: 18px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 36px;
  --shadow-soft: 0 24px 70px rgb(var(--rgb-black) / 0.12);
  --shadow-card: 0 16px 38px rgb(var(--rgb-black) / 0.08);
  --transition: 180ms ease;
}

@media (min-width: 1600px) {
  :root {
    --container: 1320px;
  }
}

@media (min-width: 1920px) {
  :root {
    --container: 1440px;
  }
}