@font-face {
  font-family: 'Bahnschrift';
  src: url('../fonts/bahnschrift.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Good Brush';
  src: url('../fonts/goodbrush.woff') format('woff'), url('../fonts/goodbrush.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}


:root {
  /* Raster unit size r */
  --r: 24px;

  /* font size base unit f */
  --f: 18px;

  /* Spacing scale: calculated multiples of r */
  --spacing-xs: calc(var(--r) * 0.25);
  --spacing-s: calc(var(--r) * 0.5);
  --spacing-m: calc(var(--r) * 1);
  --spacing-l: calc(var(--r) * 2);
  --spacing-xl: calc(var(--r) * 3);

  /* Font scale */
  --font-size-big: calc(var(--f) * 1.24);
  --font-size-regular: calc(var(--f) * 1);
  --font-size-small: calc(var(--f) * 0.6);

  /* Colors */
  --ci-background-color: #f25a73;
  --ci-text-color: black;
  --ci-highlight-color: #5aff15;
  --ci-watermark-color: #983143;
  --ci-buttons-background-color: white;

  /* Transition speed */
  --transition-fast: 0.2s ease;
  --transition-medium: 0.4s ease;

  /* Border radius */
  --radius-s: calc(var(--r) * 0.25);
  --radius-m: calc(var(--r) * 0.5);
  --radius-full: 100%;

  /* Circle nav */
  --circle-size: 25px;
  --circle-gap: calc(var(--r) * 0.375);

  /* Logo */
  --logo-size: 20vw;
  --logo-min: 150px;
  --logo-max: 160px;

  --logo-watermark-color: var(--ci-watermark-color);
}

* {
  font-family: "Bahnschrift", sans-serif;
  user-select: none;      /* no text selection anywhere */
  cursor: default;        /* no I-beam cursor */
}

/* restore pointer on things that need it */
a, button, .circle, .bottle-item, .bottle-arrow, [role="button"] {
  cursor: pointer;
  color: var(--ci-highlight-color); /* Set default text color */
}

h1.brush-font,
.brush-font {
  font-family: "Good Brush", cursive !important;
  font-weight: normal !important;
  font-style: normal !important;
}

/* =====================================================
   BASE PAGE
   ===================================================== */

body {
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  scroll-padding-top: var(--shadow-helper-visible);
  background-color: var(--ci-background-color); /* Set background color for the body */
  color: var(--ci-highlight-color); /* Set default text color */
}

/* =====================================================
   XX BACKGROUND DECORATION
   ===================================================== */

.xx-background {
  position: absolute;
  bottom: 0;
  inset: 0;
  pointer-events: none;
  z-index: 2; /* Above body background but below content (content z-index:10) */
  display: flex;
  display: none;

  align-items: center;
  justify-content: center;
  overflow: hidden;
  opacity: 0.7;
  transition: opacity var(--transition-medium);
}

.xx-background svg {
  width: 80vw;
  height: auto;
}

/* =====================================================
   GRID / FLEX UTILITIES
   ===================================================== */

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-col {
  flex-direction: column;
}

.flex-row {
  flex-direction: row;
}

.flex-wrap {
  flex-wrap: wrap;
}

.gap-xs { gap: var(--spacing-xs); }
.gap-s  { gap: var(--spacing-s); }
.gap-m  { gap: var(--spacing-m); }
.gap-l  { gap: var(--spacing-l); }
.gap-xl { gap: var(--spacing-xl); }

/* =====================================================
   SPACING UTILITIES
   ===================================================== */

.mt-xs { margin-top: var(--spacing-xs); }
.mt-s  { margin-top: var(--spacing-s); }
.mt-m  { margin-top: var(--spacing-m); }
.mt-l  { margin-top: var(--spacing-l); }
.mt-xl { margin-top: var(--spacing-xl); }

.mb-xs { margin-bottom: var(--spacing-xs); }
.mb-s  { margin-bottom: var(--spacing-s); }
.mb-m  { margin-bottom: var(--spacing-m); }
.mb-l  { margin-bottom: var(--spacing-l); }
.mb-xl { margin-bottom: var(--spacing-xl); }

.p-m  { padding: var(--spacing-m); }
.p-l  { padding: var(--spacing-l); }
.px-m { padding-left: var(--spacing-m); padding-right: var(--spacing-m); }
.py-m { padding-top: var(--spacing-m); padding-bottom: var(--spacing-m); }

/* =====================================================
   TYPOGRAPHY UTILITIES
   ===================================================== */

.text-center  { text-align: center; }
.text-left    { text-align: left; }
.text-right   { text-align: right; }

.text-highlight { color: var(--ci-highlight-color); }
.text-white     { color: white; }
.text-black     { color: black; }
.color-black    { color: black; }