/* ==========================================================================
   Engage Web — Design Tokens
   Single source of truth for all design values. Never hardcode values in
   component CSS — always reference these variables.
   Reference: engage-template.webflow.io
   ========================================================================== */

/* ---------- Font ---------- */
@font-face {
  font-family: 'Inter Tight';
  src: url('https://cdn.prod.website-files.com/66bbc417df501b935e5152c6/66bc9bfc8b6362a972ff1b70_InterTight-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Font Family ---------- */
  --font-family: 'Inter Tight', sans-serif;

  /* ---------- Font Sizes ---------- */
  --fs-h1: 88px;
  --fs-h2: 72px;
  --fs-h3: 52px;
  --fs-h4: 32px;
  --fs-h5: 28px;
  --fs-h6: 24px;
  --fs-display: 48px;
  --fs-body-lg: 18px;
  --fs-body-md: 16px;
  --fs-body-sm: 14px;
  --fs-nav: 16px;
  --fs-label: 16px;
  --fs-legal: 13.6px;
  --fs-cart-count: 11px;

  /* ---------- Line Heights ---------- */
  --lh-h1: 92.4px;
  --lh-h2: 72px;
  --lh-h3: 52px;
  --lh-h4: 35.2px;
  --lh-h5: 33.6px;
  --lh-h6: 28.8px;
  --lh-display: 52.8px;
  --lh-body-lg: 24.3px;
  --lh-body-md: 21.6px;
  --lh-body-sm: 18.9px;
  --lh-nav: 21.6px;
  --lh-label: 21.6px;
  --lh-legal: 18.36px;

  /* ---------- Font Weights ---------- */
  --fw-light: 300;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-xbold: 800;

  /* ---------- Colors — Core ---------- */
  --c-black: #000000;
  --c-white: #FFFFFF;
  --c-ink: #101010;

  /* ---------- Colors — Greys ---------- */
  --c-grey-600: #2E2E2E;
  --c-grey-500: #333333;
  --c-grey-400: #8C9399;
  --c-grey-400-alpha: rgba(60, 60, 63, 0.7);
  --c-grey-300: #8F92A0;
  --c-grey-200: #D2D6D9;
  --c-grey-100: #D8D8DB;
  --c-grey-50: #F6F6F3;
  --c-border: rgba(63, 70, 75, 0.09);
  --c-border-light: rgba(63, 70, 75, 0.06);

  /* ---------- Colors — Accents ---------- */
  --c-blue: #1E7BFA;
  --c-sky: #75C3FF;
  --c-purple: #C6B6FF;
  --c-magenta: #CF4BB3;
  --c-indigo-bg: rgba(45, 64, 234, 0.1);

  /* ---------- Colors — Status ---------- */
  --c-red: #A12C2E;
  --c-red-bg: #FFDEDE;
  --c-green: #7DB902;
  --c-green-bg: #C7D8C5;
  --c-yellow: #FBBC04;
  --c-yellow-bg: #FEF3C7;
  --c-orange: #F05022;
  --c-amber: #FFB700;

  /* ---------- Colors — Surfaces ---------- */
  --c-cream: #FEF3C7;
  --c-pink-bg: #FFC8C4;
  --c-violet: #2E1065;
  --c-lavender: #C8E7FF;
  --c-forest: #2F442D;
  --c-brown: #451A03;
  --c-navy: #082F49;

  /* ---------- Border Radius ---------- */
  --r-pill: 144px;
  --r-xl: 32px;
  --r-lg: 24px;
  --r-md: 16px;
  --r-sm: 12px;
  --r-xs: 8px;
  --r-2xs: 4px;
  --r-tag: 4px 4px 0 0;
  --r-min: 2px;

  /* ---------- Spacing ---------- */
  --sp-global-x: 48px;
  --sp-section-top: 144px;
  --sp-section-lg: 160px;
  --sp-section-xl: 224px;
  --sp-container: 1440px;
  --sp-container-sm: 1200px;

  /* ---------- Transitions ---------- */
  --t-fast: 0.2s ease;
  --t-default: 0.3s ease;
  --t-slow: 0.5s ease;

  /* ---------- Shadows ---------- */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 16px 32px -8px rgba(0, 0, 0, 0.12);

  /* ---------- Z-index ---------- */
  --z-navbar: 100;
  --z-dropdown: 101;
  --z-cart: 200;
  --z-mobile-menu: 150;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; font-size: 100%; }
body {
  font-family: var(--font-family);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-medium);
  line-height: var(--lh-body-lg);
  color: var(--c-black);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: inline-block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: inherit; font-size: inherit; }
ul, ol { list-style: none; }

/* ---------- Typography Classes ---------- */
.heading-style-h1 { font-size: var(--fs-h1); font-weight: var(--fw-medium); line-height: var(--lh-h1); }
.heading-style-h2 { font-size: var(--fs-h2); font-weight: var(--fw-medium); line-height: var(--lh-h2); }
.heading-style-h3 { font-size: var(--fs-h3); font-weight: var(--fw-medium); line-height: var(--lh-h3); }
.heading-style-h4 { font-size: var(--fs-h4); font-weight: var(--fw-medium); line-height: var(--lh-h4); }
.heading-style-h5 { font-size: var(--fs-h5); font-weight: var(--fw-medium); line-height: var(--lh-h5); }
.heading-style-h6 { font-size: var(--fs-h6); font-weight: var(--fw-medium); line-height: var(--lh-h6); }
.text-size-large { font-size: var(--fs-body-lg); font-weight: var(--fw-medium); line-height: var(--lh-body-lg); }
.text-size-medium { font-size: var(--fs-body-md); font-weight: var(--fw-medium); line-height: var(--lh-body-md); }
.text-size-small { font-size: var(--fs-body-sm); font-weight: var(--fw-medium); line-height: var(--lh-body-sm); }
.text-style-label { font-size: var(--fs-label); font-weight: var(--fw-bold); line-height: var(--lh-label); }
.text-weight-light { font-weight: var(--fw-light); }
.text-weight-normal { font-weight: var(--fw-normal); }
.text-weight-medium { font-weight: var(--fw-medium); }
.text-weight-semibold { font-weight: var(--fw-semibold); }
.text-weight-bold { font-weight: var(--fw-bold); }
.text-weight-xbold { font-weight: var(--fw-xbold); }
.text-color-white { color: var(--c-white); }
.text-color-black { color: var(--c-black); }
.text-color-grey-400 { color: var(--c-grey-400); }
.text-style-muted { color: var(--c-grey-400); }
.text-style-italic { font-style: italic; }
.text-style-strikethrough { text-decoration: line-through; }
.text-style-all-caps { text-transform: uppercase; }
.text-align-center { text-align: center; }
.text-align-left { text-align: left; }
.text-align-right { text-align: right; }

/* ---------- Layout Utilities ---------- */
.padding-global { padding: 0 var(--sp-global-x); }
.container-medium { max-width: var(--sp-container); margin: 0 auto; }
.container-small { max-width: var(--sp-container-sm); margin: 0 auto; }
.padding-section-large { padding-top: var(--sp-section-lg); }
.padding-section-xlarge { padding-top: var(--sp-section-xl); }
.display-block { display: block; }
.display-flex { display: flex; }
.display-inline-block { display: inline-block; }
.display-inline { display: inline; }
.hide { display: none !important; }
.hide-tablet { display: block; }

/* ---------- Buttons ---------- */
.button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px 28px;
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-body-lg);
  background: var(--c-sky);
  color: var(--c-black);
  border-radius: var(--r-pill);
  border: none;
  cursor: pointer;
  transition: var(--t-fast);
  text-decoration: none;
  white-space: nowrap;
  position: relative;
}
.button:hover { opacity: 0.85; }
.button.is-large {
  padding: 20px 28px;
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-body-lg);
}
.button.is-small {
  padding: 11.2px 18px;
  font-size: var(--fs-nav);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-nav);
}
.button.black { background: var(--c-black); color: var(--c-white); }
.button.purple { background: var(--c-purple); color: var(--c-black); }
.button.white { background: var(--c-white); color: var(--c-black); }
.button.ghost { background: transparent; color: var(--c-black); border: 1px solid var(--c-border); }
.button.ghost:hover { background: var(--c-black); color: var(--c-white); }

/* ---------- Labels ---------- */
.label {
  display: inline-flex;
  align-items: center;
  padding: 5.6px 12px;
  font-size: var(--fs-body-md);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-body-md);
  color: var(--c-black);
  background: var(--c-white);
  border-radius: var(--r-pill);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}