:root,
.color-glass {
  --color-background: 18,21,26;
  --gradient-background: #12151A;
  --color-foreground: 232,228,219;
  --color-background-contrast: 130,145,169;
  --color-shadow: 26,29,35;
  --color-button: 110,36,54;
  --color-button-text: 232,228,219;
  --color-secondary-button: 18,21,26;
  --color-secondary-button-text: 232,228,219;
  --color-link: 232,228,219;
  --color-badge-foreground: 232,228,219;
  --color-badge-background: 18,21,26;
  --color-badge-border: 232,228,219;
  --payment-terms-background-color: rgb(18,21,26);
}

.color-ink {
  --color-background: 25,29,36;
  --gradient-background: #191D24;
  --color-foreground: 232,228,219;
  --color-background-contrast: 35,41,51;
  --color-shadow: 26,29,35;
  --color-button: 110,36,54;
  --color-button-text: 232,228,219;
  --color-secondary-button: 25,29,36;
  --color-secondary-button-text: 140,154,142;
  --color-link: 140,154,142;
  --color-badge-foreground: 232,228,219;
  --color-badge-background: 25,29,36;
  --color-badge-border: 232,228,219;
  --payment-terms-background-color: rgb(25,29,36);
}

.color-slate {
  --color-background: 35,41,50;
  --gradient-background: #232932;
  --color-foreground: 232,228,219;
  --color-background-contrast: 46,53,65;
  --color-shadow: 26,29,35;
  --color-button: 232,228,219;
  --color-button-text: 26,29,35;
  --color-secondary-button: 35,41,50;
  --color-secondary-button-text: 232,228,219;
  --color-link: 232,228,219;
  --color-badge-foreground: 232,228,219;
  --color-badge-background: 35,41,50;
  --color-badge-border: 232,228,219;
  --payment-terms-background-color: rgb(35,41,50);
}

.color-paper {
  --color-background: 232,228,219;
  --gradient-background: #E8E4DB;
  --color-foreground: 26,29,35;
  --color-background-contrast: 182,170,141;
  --color-shadow: 26,29,35;
  --color-button: 26,29,35;
  --color-button-text: 232,228,219;
  --color-secondary-button: 232,228,219;
  --color-secondary-button-text: 26,29,35;
  --color-link: 26,29,35;
  --color-badge-foreground: 26,29,35;
  --color-badge-background: 232,228,219;
  --color-badge-border: 26,29,35;
  --payment-terms-background-color: rgb(232,228,219);
}

.color-oxblood {
  --color-background: 110,36,54;
  --gradient-background: #6E2436;
  --color-foreground: 232,228,219;
  --color-background-contrast: 129,42,63;
  --color-shadow: 26,29,35;
  --color-button: 232,228,219;
  --color-button-text: 110,36,54;
  --color-secondary-button: 110,36,54;
  --color-secondary-button-text: 232,228,219;
  --color-link: 232,228,219;
  --color-badge-foreground: 232,228,219;
  --color-badge-background: 110,36,54;
  --color-badge-border: 232,228,219;
  --payment-terms-background-color: rgb(110,36,54);
}

body,
.color-glass,
.color-ink,
.color-slate,
.color-paper,
.color-oxblood {
  color: rgba(var(--color-foreground), 0.75);
  background-color: rgb(var(--color-background));
}

:root {
  --font-body-family: 'Jost', ui-sans-serif, 'Helvetica Neue', sans-serif;
  --font-body-style: normal;
  --font-body-weight: 300;
  --font-body-weight-bold: 500;
  --font-heading-family: 'Bodoni Moda', 'Didot', 'Times New Roman', serif;
  --font-heading-style: normal;
  --font-heading-weight: 400;
  --font-body-scale: 1.05;
  --font-heading-scale: 1.1429;
  --media-padding: 0px;
  --media-border-opacity: 1.0;
  --media-border-width: 0px;
  --media-radius: 0px;
  --media-shadow-opacity: 0.0;
  --media-shadow-horizontal-offset: 0px;
  --media-shadow-vertical-offset: 4px;
  --media-shadow-blur-radius: 0px;
  --media-shadow-visible: 0;
  --page-width: 160.0rem;
  --page-width-margin: 2rem;
  --product-card-image-padding: 0.0rem;
  --product-card-corner-radius: 0.0rem;
  --product-card-text-alignment: center;
  --product-card-border-width: 0.0rem;
  --product-card-border-opacity: 1.0;
  --product-card-shadow-opacity: 0.0;
  --product-card-shadow-visible: 0;
  --product-card-shadow-horizontal-offset: 0.0rem;
  --product-card-shadow-vertical-offset: 0.4rem;
  --product-card-shadow-blur-radius: 0.0rem;
  --collection-card-image-padding: 0.0rem;
  --collection-card-corner-radius: 0.0rem;
  --collection-card-text-alignment: center;
  --collection-card-border-width: 0.1rem;
  --collection-card-border-opacity: 1.0;
  --collection-card-shadow-opacity: 0.0;
  --collection-card-shadow-visible: 0;
  --collection-card-shadow-horizontal-offset: 0.0rem;
  --collection-card-shadow-vertical-offset: 0.4rem;
  --collection-card-shadow-blur-radius: 0.0rem;
  --blog-card-image-padding: 0.0rem;
  --blog-card-corner-radius: 0.0rem;
  --blog-card-text-alignment: center;
  --blog-card-border-width: 0.1rem;
  --blog-card-border-opacity: 1.0;
  --blog-card-shadow-opacity: 0.0;
  --blog-card-shadow-visible: 0;
  --blog-card-shadow-horizontal-offset: 0.0rem;
  --blog-card-shadow-vertical-offset: 0.4rem;
  --blog-card-shadow-blur-radius: 0.0rem;
  --badge-corner-radius: 0.0rem;
  --popup-border-width: 1px;
  --popup-border-opacity: 1.0;
  --popup-corner-radius: 0px;
  --popup-shadow-opacity: 0.0;
  --popup-shadow-horizontal-offset: 0px;
  --popup-shadow-vertical-offset: 4px;
  --popup-shadow-blur-radius: 0px;
  --drawer-border-width: 1px;
  --drawer-border-opacity: 1.0;
  --drawer-shadow-opacity: 0.0;
  --drawer-shadow-horizontal-offset: 0px;
  --drawer-shadow-vertical-offset: 4px;
  --drawer-shadow-blur-radius: 0px;
  --spacing-sections-desktop: 0px;
  --spacing-sections-mobile: 0px;
  --grid-desktop-vertical-spacing: 20px;
  --grid-desktop-horizontal-spacing: 4px;
  --grid-mobile-vertical-spacing: 10px;
  --grid-mobile-horizontal-spacing: 2px;
  --text-boxes-border-opacity: 1.0;
  --text-boxes-border-width: 0px;
  --text-boxes-radius: 0px;
  --text-boxes-shadow-opacity: 0.0;
  --text-boxes-shadow-visible: 0;
  --text-boxes-shadow-horizontal-offset: 0px;
  --text-boxes-shadow-vertical-offset: 0px;
  --text-boxes-shadow-blur-radius: 0px;
  --buttons-radius: 0px;
  --buttons-radius-outset: 0px;
  --buttons-border-width: 1px;
  --buttons-border-opacity: 1.0;
  --buttons-border-offset: 0px;
  --buttons-shadow-opacity: 0.0;
  --buttons-shadow-visible: 0;
  --buttons-shadow-horizontal-offset: 0px;
  --buttons-shadow-vertical-offset: 4px;
  --buttons-shadow-blur-radius: 0px;
  --inputs-radius: 0px;
  --inputs-border-width: 1px;
  --inputs-border-opacity: 1.0;
  --inputs-shadow-opacity: 0.0;
  --inputs-shadow-horizontal-offset: 0px;
  --inputs-margin-offset: 0px;
  --inputs-shadow-vertical-offset: 4px;
  --inputs-shadow-blur-radius: 0px;
  --inputs-radius-outset: 0px;
  --variant-pills-radius: 0px;
  --variant-pills-border-width: 1px;
  --variant-pills-border-opacity: 1.0;
  --variant-pills-shadow-opacity: 0.0;
  --variant-pills-shadow-horizontal-offset: 0px;
  --variant-pills-shadow-vertical-offset: 4px;
  --variant-pills-shadow-blur-radius: 0px;
  --v-glass: #12151A;
  --v-ink: #191D24;
  --v-slate: #232932;
  --v-paper: #E8E4DB;
  --v-oxblood: #6E2436;
  --v-sage: #8C9A8E;
  --v-rule: rgba(232, 228, 219, 0.14);
  --v-rule-paper: rgba(26, 29, 35, 0.16);
  --v-strip: clamp(20rem, 24vw, 34rem);
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
  font-size: calc(var(--font-body-scale) * 62.5%);
  height: 100%;
}

body {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  grid-template-columns: 100%;
  min-height: 100%;
  margin: 0;
  font-size: 1.5rem;
  letter-spacing: 0.06rem;
  line-height: calc(1 + 0.8 / var(--font-body-scale));
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
}
