/** Shopify CDN: Minification failed

Line 218:0 Unexpected "<"

**/
/* ===================================================================
   HULEY PREMIUM TOKENS · Design System
   Inspirado en LaBoutique (Carlos), Cartier, Linear, jerrythewebdev
   =================================================================== */

:root {
  /* === COLORS - Teal Scale (extended Huley turquoise) === */
  --hx-teal-50:  #e6faf8;
  --hx-teal-100: #b3eee9;
  --hx-teal-200: #80e3da;
  --hx-teal-300: #4dd7cb;
  --hx-teal-400: #2EC4B6;
  --hx-teal-500: #25b5b5;
  --hx-teal-600: #1c9494;
  --hx-teal-700: #166f6f;
  --hx-teal-800: #104b4b;
  --hx-teal-900: #082626;

  /* === COLORS - Gold accent (premium) === */
  --hx-gold-300: #f3dca0;
  --hx-gold-400: #e8c56c;
  --hx-gold-500: #d4ac3c;
  --hx-gold-600: #a8862c;

  /* === COLORS - Neutral === */
  --hx-bg:        #060606;
  --hx-bg-soft:   #0a0a0a;
  --hx-bg-card:   #111111;
  --hx-fg:        #f2f2f2;
  --hx-fg-muted:  rgba(242,242,242,.65);
  --hx-fg-soft:   rgba(242,242,242,.4);
  --hx-fg-faint:  rgba(242,242,242,.18);

  /* === SPACING SYSTEM (4px base, inspired Tailwind) === */
  --hx-space-1: 4px;
  --hx-space-2: 8px;
  --hx-space-3: 12px;
  --hx-space-4: 16px;
  --hx-space-5: 20px;
  --hx-space-6: 24px;
  --hx-space-7: 32px;
  --hx-space-8: 40px;
  --hx-space-9: 48px;
  --hx-space-10: 64px;
  --hx-space-11: 80px;
  --hx-space-12: 120px;

  /* === TYPOGRAPHY === */
  --hx-font-display: 'Bebas Neue', sans-serif;
  --hx-font-body:    'Inter', sans-serif;

  --hx-text-display: clamp(3.5rem, 9vw, 7rem);
  --hx-text-h1:      clamp(2.5rem, 6vw, 4.5rem);
  --hx-text-h2:      clamp(2rem, 5vw, 3.5rem);
  --hx-text-h3:      clamp(1.5rem, 3vw, 2.2rem);
  --hx-text-body:    1rem;
  --hx-text-small:   0.85rem;
  --hx-text-caption: 0.72rem;

  /* === EASINGS (cinematic motion) === */
  --hx-ease-fluid:  cubic-bezier(.22, .61, .36, 1);
  --hx-ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
  --hx-ease-elegant: cubic-bezier(.76, 0, .24, 1);
  --hx-ease-sharp:  cubic-bezier(.16, 1, .3, 1);

  /* === SHADOWS === */
  --hx-shadow-glow-turq: 0 0 40px rgba(46, 196, 182, .35), 0 0 80px rgba(46, 196, 182, .12);
  --hx-shadow-glow-gold: 0 0 40px rgba(232, 197, 108, .25);
  --hx-shadow-card:      0 4px 24px rgba(0,0,0,.5);
  --hx-shadow-card-hover: 0 28px 80px rgba(0,0,0,.7), 0 0 60px rgba(46,196,182,.25);
  --hx-shadow-cinematic: 0 60px 140px rgba(0,0,0,.85), 0 0 0 1px rgba(46,196,182,.08);

  /* === BORDER RADIUS === */
  --hx-radius-sm: 8px;
  --hx-radius:    12px;
  --hx-radius-lg: 24px;
  --hx-radius-xl: 36px;
  --hx-radius-pill: 999px;

  /* === BLUR === */
  --hx-blur-bg: 14px;
  --hx-blur-modal: 30px;

  /* === Z-INDEX SCALE === */
  --hx-z-base: 0;
  --hx-z-elevated: 10;
  --hx-z-sticky: 100;
  --hx-z-nav: 99999;
  --hx-z-modal: 99998;
  --hx-z-toast: 9999998;
}

/* === UTILITY CLASSES (premium typography) === */
.hx-text-display {
  font-family: var(--hx-font-display);
  font-size: var(--hx-text-display);
  line-height: .92;
  letter-spacing: .03em;
}
.hx-text-h1 {
  font-family: var(--hx-font-display);
  font-size: var(--hx-text-h1);
  line-height: .95;
  letter-spacing: .02em;
}
.hx-text-h2 {
  font-family: var(--hx-font-display);
  font-size: var(--hx-text-h2);
  line-height: 1;
  letter-spacing: .02em;
}
.hx-eyebrow {
  font-family: var(--hx-font-body);
  font-weight: 600;
  font-size: var(--hx-text-caption);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--hx-teal-400);
}

/* === PREMIUM CARD VARIANTS === */
.hx-card-premium {
  background: var(--hx-bg-card);
  border-radius: var(--hx-radius-lg);
  border: 1px solid rgba(46,196,182,.08);
  transition: transform .55s var(--hx-ease-fluid),
              box-shadow .55s var(--hx-ease-fluid),
              border-color .55s var(--hx-ease-fluid);
  will-change: transform;
}
.hx-card-premium:hover {
  transform: translateY(-6px);
  border-color: rgba(46,196,182,.35);
  box-shadow: var(--hx-shadow-card-hover);
}

/* === GRADIENT TEXT (used for accents) === */
.hx-gradient-text {
  background: linear-gradient(135deg, var(--hx-teal-400) 0%, var(--hx-gold-400) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* === DIVIDERS === */
.hx-divider-glow {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hx-teal-400) 50%, transparent);
  border: none;
  margin: var(--hx-space-9) 0;
}

/* === BUTTON VARIANTS PREMIUM === */
.hx-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--hx-space-3);
  background: var(--hx-teal-400);
  color: var(--hx-bg) !important;
  padding: 18px 48px;
  font-family: var(--hx-font-body);
  font-weight: 700 !important;
  font-size: var(--hx-text-small);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--hx-radius-sm);
  transition: all .35s var(--hx-ease-fluid);
  position: relative;
  overflow: hidden;
}
.hx-btn-primary:hover {
  background: var(--hx-fg);
  transform: translateY(-2px);
  box-shadow: var(--hx-shadow-glow-turq);
}
.hx-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: var(--hx-space-3);
  border: 1px solid var(--hx-fg-faint);
  color: var(--hx-fg) !important;
  padding: 18px 48px;
  font-family: var(--hx-font-body);
  font-weight: 500;
  font-size: var(--hx-text-small);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--hx-radius-sm);
  transition: all .35s var(--hx-ease-fluid);
}
.hx-btn-ghost:hover {
  border-color: var(--hx-teal-400);
  color: var(--hx-teal-400) !important;
  transform: translateY(-2px);
}

/* === FOCUS RING (a11y premium) === */
.hx-focus-ring:focus-visible {
  outline: 2px solid var(--hx-teal-400);
  outline-offset: 4px;
}

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
  .hx-card-premium,
  .hx-btn-primary,
  .hx-btn-ghost { transition: none !important; }
  .hx-card-premium:hover { transform: none !important; }
}
</content>
</invoke>