:root {
  /* Design colors */
  --color-gold: #7c7262;
  --color-gold-rgb: 124, 114, 98;
  --color-gold-40: rgba(124, 114, 98, 0.4);
  --color-gold-20: rgba(124, 114, 98, 0.2);
  --color-white: #ffffff;
  --color-white-rgb: 255, 255, 255;
  --color-white-40: rgba(255, 255, 255, 0.4);
  --color-white-10: rgba(255, 255, 255, 0.1);
  --color-black: #000000;
  --color-black-rgb: 0, 0, 0;
  --color-black-10: rgba(0, 0, 0, 0.1);
  --color-black-50: rgba(0, 0, 0, 0.5);

  /* Fonts */
  --font-sans: "Inter", sans-serif;
  --font-disp: "Playfair Display", serif;

  /* Transition tokens */
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --duration-fast: 0.3s;
  --duration-medium: 0.5s;
  --duration-slow: 0.8s;
  --duration-slide: 1.2s;

  /* Viewport base for clamping (Responsive scaling scale) */
  --size: 390;
}

@media (min-width: 650px) {
  :root {
    --size: 1500;
  }
}

@media (orientation: portrait) and (min-width: 650px) and (max-width: 1100px) {
  :root {
    --size: 834;
  }
}

html {
  font-size: clamp(1px, 10 * 100vw / var(--size), 12px);
  -webkit-text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
}