:root {
  --ds-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='l'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 3 0 0 0 -1.5'/%3E%3C/filter%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -3 0 0 0 1.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23l)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23d)'/%3E%3C/svg%3E");
  --ds-gradient-button: linear-gradient(
    100deg,
    #7e612e 0%,
    #c4a25b 20%,
    #f2e1a4 44%,
    #d6b76e 62%,
    #a6844a 82%,
    #7a5e2d 100%
  );
  --ds-gradient-gold: linear-gradient(
    95deg,
    #f4de96 0%,
    #d9b866 50%,
    #b8944c 100%
  );
  --ds-bg: #0a141e;
  --ds-surface: #0d1a27;
  --ds-paper: #ece8df;
  --ds-ink: #ece8df;
  --ds-muted: #c4c2bc;
  --ds-gold: #d4b571;
  --ds-rule: #d4b5713d;
  --ds-sans: Inter, Arial, sans-serif;
  --ds-heading: Barlow, Arial, sans-serif;
  --ds-serif: "Playfair Display", Georgia, serif;
  --ds-pill: 999px;
  --ds-radius: 16px;
  --ds-section: clamp(3.5rem, 7vw, 7rem);
  --ds-cream: #f5ebc9;
  --ds-black: #060c13;
  --ds-gap: clamp(1rem, 2vw, 2rem);
}

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

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

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

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

@font-face {
  font-family: Barlow;
  src: url("fonts/barlow-800.woff2") format("woff2");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("fonts/playfair-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}