@font-face {
  font-family: Montserrat;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/Montserrat-Regular.ttf") format("truetype");
}

:root {
  /* Colors — dark theme (default) */
  --color-main-background: rgb(10 10 15 / 1);
  --color-secondary-background: rgb(26 26 36 / 1);
  --color-content-background: rgb(18 18 26 / 1);
  --color-unactive-background: rgb(60 60 75 / 1);
  --color-highlighter: rgb(142 124 255 / 1);
  --color-alt-highlighter: rgb(255 102 204 / 1);
  --color-main-font: rgb(240 240 255 / 0.9);
  --color-link: rgb(198 120 221 / 1);
  --color-link-hover: rgb(255 102 204 / 1);
  --color-gradient-first: rgb(252 176 29 / 1);
  --color-gradient-second: rgb(142 124 255 / 1);
  --color-brand: rgb(252 176 29 / 1);
  --color-heading: rgb(255 255 255 / 1);
  --color-heading-on-dark: rgb(255 255 255 / 1);
  --color-btn-brand-text: rgb(10 10 15);
  --color-contrast-background: linear-gradient(135deg, #8e7cff 0%, #ff66cc 100%);

  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-sd: 0.75rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-xxl: 3rem;

  /* Fluid sizing */
  --size-fluid-xs: clamp(0.5rem, 1vw, 1rem);
  --size-fluid-sm: clamp(1rem, 2vw, 1.5rem);
  --size-fluid-md: clamp(1.5rem, 3vw, 2rem);
  --size-fluid-lg: clamp(2rem, 4vw, 3rem);
  --size-fluid-xl: clamp(3rem, 5vw, 4rem);
  --size-fluid-xxl: clamp(4rem, 6vw, 5rem);

  /* Layout */
  --container-padding: var(--size-fluid-xs);
  --container-max-width: 1200px;
  --slide-width: clamp(280px, 30vw, 360px);
  --slide-width-mobile: clamp(17.5em, 30vw, 22.5em);
  --slide-gap: 30px;

  /* Typography */
  --menu-item-font-size: clamp(14px, 1vw + 0.5rem, 14px);
  --font-scale-factor: 1;
  --star-size: 1.6rem;

  /* Radius */
  --radius-small: 0.3125rem;
  --radius-medium: 1em;

  /* Base styles */
  font-family: Montserrat, Arial, Helvetica, sans-serif;
  font-size: 16px;
  cursor: auto;
  mix-blend-mode: normal;
  opacity: 1;
  pointer-events: auto;
  user-select: auto;
}

/* Responsive token overrides (from Webstudio breakpoints) */
@media (max-width: 991px) {
  :root {
    --menu-item-font-size: clamp(0.75rem, 0.8vw + 0.4rem, 0.875rem);
    --slide-width: clamp(240px, 45vw, 320px);
  }
}

@media (max-width: 767px) {
  :root {
    --slide-width: clamp(200px, 70vw, 300px);
    --slide-gap: 16px;
    --container-padding: var(--spacing-md);
  }
}

@media (max-width: 479px) {
  :root {
    --slide-width: 80vw;
    --slide-gap: 12px;
    --container-padding: var(--spacing-sm);
  }
}

/* Light theme overrides (dark is default from Webstudio tokens) */
html[data-theme="light"] {
  --color-alt-highlighter: var(--color-contrast-background);
  --color-brand: rgb(200 16 46 / 1);
  --color-content-background: rgb(250 250 250 / 1);
  --color-contrast-background: rgb(99 82 255 / 1);
  --color-gradient-first: var(--color-heading);
  --color-gradient-second: var(--color-main-background);
  --color-heading: rgb(0 0 0 / 1);
  --color-highlighter: rgb(93 45 230 / 1);
  --color-link: var(--color-brand);
  --color-link-hover: rgb(160 13 36 / 1);
  --color-main-background: rgb(255 255 255 / 1);
  --color-main-font: rgb(0 0 0 / 1);
  --color-secondary-background: rgb(243 245 246 / 1);
  --color-btn-brand-text: rgb(255 255 255);
  --color-unactive-background: rgb(214 214 214 / 1);
}