@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Archivo:wght@400;500;600;700&family=Caveat:wght@500;600;700&display=swap');
:root {
  --bg: #0b0c10;
  --bg-2: #14151a;
  --ink: #f1ece2;
  --ink-2: #d9d4c8;
  --muted: #7a7a82;
  --accent: #c9a960;
  --rule: rgba(241, 236, 226, 0.18);
  --rule-strong: rgba(241, 236, 226, 0.55);
  --stage-bg: var(--bg-2);
  --font-display: "Cormorant Garamond", serif;
  --font-body: "Archivo", system-ui, sans-serif;
  --font-script: "Caveat", cursive;
}

/* body / UI text follows the body font */
body, input, button, select, textarea { font-family: var(--font-body); }

/* display / serif usages across the storefront follow the display font */
h1, h2, h3, h4, .serif, .brand-mark,
[class*="-title"], [class*="-h"], [class*="-hero-h"], [class*="-scene-h"],
.greet-title, .product-title, .price-amount, .hx-name, .vs-h {
  font-family: var(--font-display);
}

/* the handwritten sub-mark ("atelier") follows the script font */
.brand-sub, [class*="brand-sub"] { font-family: var(--font-script); }