:root {
  /* Site sizing */
  --site-max-width: 1440px;
  --header-height: 80px;

  /* Colors */
  --trixie-beige: #F3EFE9;
  --trixie-blue: #D0ECFF;
  --trixie-green: #284926;
  --trixie-orange: #F04A23;
  --trixie-pink: #E58480;
  --trixie-red: #AA1D37;
  --trixie-text-dark: #000000;
  --trixie-text-light: #ffffff;

  /* Border radius */
  --br-btn: 2rem;
  --br-wrapper: 1.25rem;
  --br-card: 1rem;

  /* Spacing — fluid clamp (desktop only, mobile overrides below) */
  --spacing-xs: clamp(0.5rem,    0.25rem + 0.4vw + 0.25vh,   1rem);       /* ~12px */
  --spacing-s:  clamp(0.875rem,  0.4rem + 0.65vw + 0.4vh,    1.625rem);   /* ~20px */
  --spacing-m:  clamp(1.25rem,   0.5rem + 1vw + 0.65vh,      2.5rem);     /* ~30px */
  --spacing-l:  clamp(1.75rem,   0.625rem + 1.3vw + 0.9vh,   3.25rem);    /* ~40px */
  --spacing-xl: clamp(2rem,      0.75rem + 1.55vw + 1vh,     4rem);       /* ~48px */
  --spacing-2xl:clamp(2.5rem,    0.875rem + 1.9vw + 1.3vh,   5rem);       /* ~60px */
  --spacing-3xl:clamp(3.5rem,    1.2rem + 2.6vw + 1.9vh,       6.5rem);     /* ~80px */
  --spacing-4xl:clamp(4.5rem,    1.25rem + 3.2vw + 2.5vh,    8.25rem);    /* ~100px */
  --spacing-5xl:clamp(7rem,      2rem + 5vw + 3.75vh,        13rem);      /* ~160px */

  /* Animations */
  --transition-fast: 200ms;
  --transition-normal: 800ms;
  --transition-slow: 1000ms;
  --cubic-bezier: cubic-bezier(0.215, 0.61, 0.355, 1);
  --delay-index: 0;
  --stagger-base: 0.1s;
  --stagger-multiplier: 2;

  /* Fonts */
  --font-heading: "Thermal", "Times New Roman", Times, serif;
  --font-body: "Aptos", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Font sizes — fluid clamp (desktop only, mobile overrides below) */
  --fs-xs: clamp(0.75rem,   0.5rem + 0.25vw + 0.15vh,   1rem);       /* ~14px */
  --fs-s:  clamp(0.875rem,  0.55rem + 0.45vw + 0.3vh,   1.125rem);   /* ~16px */
  --fs-m:  clamp(1rem,      0.625rem + 0.5vw + 0.33vh,  1.5rem);     /* ~20px */
  --fs-l:  clamp(1.125rem,  0.7rem + 0.6vw + 0.35vh,    1.75rem);   /* ~24px */
  --fs-xl: clamp(1.375rem,  0.75rem + 0.8vw + 0.45vh,   2.375rem);   /* ~30px */
  --fs-2xl:clamp(2rem,      0.9rem + 1.2vw + 1vh,   3rem);   /* ~32px */
  --fs-3xl:clamp(2.75rem,   1rem + 2vw + 1.3vh,         3.8rem);    /* ~64px */
  --fs-4xl:clamp(4rem,      1.25rem + 3.2vw + 2vh,      5.5rem);       /* ~96px */
  --fs-5xl:clamp(5.5rem,    1.5rem + 4.25vw + 2.75vh,   7.5rem);

  /* Line heights */
  --lh-heading: calc(1em + 2px);
  --lh-body: calc(1em + 2px);
  --lh-btn: 1em;

  /* Font weights */
  --fw-heading: 700;
  --fw-body: 400;
  --fw-btn: 600;
}

@media screen and (max-width: 749px) {
  :root {
    --br-wrapper: 1rem;
    --br-card: 0.4rem;

    --fs-xs: clamp(0.8rem,   0.5rem + 1vw + 0.4vh,      1rem);      /* ~14px */
    --fs-s:  clamp(0.9rem,   0.6rem + 1.15vw + 0.45vh,  1.125rem);  /* ~16px */
    --fs-m:  clamp(1rem,     0.6rem + 1.4vw + 0.5vh,   1.35rem);   /* ~18.4px */
    --fs-l:  clamp(1.15rem,  0.6rem + 1.6vw + 0.7vh, 1.6rem);    /* ~20.8px */
    --fs-xl: clamp(1.35rem,  0.7rem + 2vw + 0.8vh,      1.9rem);    /* ~24.8px */
    --fs-2xl:clamp(1.6rem,   0.75rem + 2.5vw + 1.25vh,  2.3rem);    /* ~29.6px */
    --fs-3xl:clamp(1.8rem,   0.75rem + 3.5vw + 1.25vh,  3.2rem);   /* ~36px */
    --fs-4xl:clamp(2.4rem,   0.8rem + 4.5vw + 1.65vh,     2.75rem);    /* ~41.6px */
    --fs-5xl:clamp(2.85rem,  0.9rem + 8.75vw + 3.25vh,  5rem);      /* ~48px */
  }
}