/* ================================================================
   HOPSQUAD BRAND — Global Design Tokens & Component Styles
   Requires: Bricolage Grotesque, DM Sans, DM Mono (loaded in HTML)
   ================================================================ */

/* ── TOKENS ─────────────────────────────────────────────────────── */
:root {
  /* Accent */
  --hs-pink:         #E61F66;
  --hs-pink-hover:   #CC1A5C;
  --hs-blue:         #23A8E3;
  --hs-blue-deep:    #006E9F;
  --hs-green:        #06D700;
  --hs-green-hover:  #04BC00;

  /* Surfaces */
  --hs-black: #0C0C12;
  --hs-navy:  #16111C;
  --hs-s1:    #1A1528;
  --hs-s2:    #221D30;

  /* Text */
  --hs-text:  #F0EEFF;
  --hs-dim:   #9E97B8;
  --hs-muted: #6B7280;

  /* Borders */
  --hs-border:       rgba(255, 255, 255, 0.08);
  --hs-border-blue:  rgba(35, 168, 227, 0.25);
  --hs-border-pink:  rgba(230, 31, 102, 0.25);
  --hs-border-green: rgba(6, 215, 0, 0.25);

  /* Tints */
  --hs-tint-pink: rgba(230, 31, 102, 0.6);
  --hs-tint-blue: rgba(35, 168, 227, 0.5);
  --hs-tint-dark: rgba(22, 17, 28, 0.95);

  /* Gradients */
  --hs-grad-brand:   linear-gradient(135deg, #E61F66, #23A8E3);
  --hs-grad-play:    linear-gradient(135deg, #23A8E3, #06D700);
  --hs-grad-victory: linear-gradient(135deg, #E61F66, #06D700);
  --hs-grad-scroll:  linear-gradient(90deg, #23A8E3, #E61F66);

  /* Avatar fallbacks */
  --hs-av-grad-1: linear-gradient(135deg, #E61F66, #23A8E3);
  --hs-av-grad-2: linear-gradient(135deg, #23A8E3, #006E9F);
  --hs-av-grad-3: linear-gradient(135deg, #E61F66, #c0124f);

  /* Typography */
  --hs-font-display: 'Bricolage Grotesque', sans-serif;
  --hs-font-body:    'DM Sans', sans-serif;
  --hs-font-mono:    'DM Mono', monospace;

  /* Type scale */
  --hs-text-display: clamp(64px, 9vw, 118px);
  --hs-text-h1:      clamp(32px, 4vw, 52px);
  --hs-text-h2:      28px;
  --hs-text-h3:      21px;
  --hs-text-body-lg: 17px;
  --hs-text-body:    15px;
  --hs-text-sm:      13px;
  --hs-text-caption: 12px;
  --hs-text-mono:    11px;

  /* Tracking */
  --hs-tracking-tight:  -0.02em;
  --hs-tracking-wide:   0.08em;
  --hs-tracking-wider:  0.15em;

  /* Layout */
  --hs-nav-h:       52px;
  --hs-content-max: 1200px;
  --hs-sidebar-w:   220px;

  /* Radius — keep tight */
  --hs-radius-sm:   2px;
  --hs-radius:      3px;
  --hs-radius-md:   4px;
  --hs-radius-pill: 100px;

  /* Shadows */
  --hs-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --hs-shadow:    0 4px 20px rgba(0, 0, 0, 0.5);
  --hs-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.6);

  /* Glow */
  --hs-glow-pink:  0 0 0 3px rgba(230, 31, 102, 0.25);
  --hs-glow-blue:  0 0 0 3px rgba(35, 168, 227, 0.25);
  --hs-glow-green: 0 0 0 3px rgba(6, 215, 0, 0.20);

  /* Blur */
  --hs-blur-sm: blur(8px);
  --hs-blur:    blur(12px);
  --hs-blur-lg: blur(20px);

  /* Easing */
  --hs-ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --hs-ease-out:  cubic-bezier(0, 0, 0.2, 1);
  --hs-ease-snap: cubic-bezier(0.2, 0, 0, 1);

  /* Duration */
  --hs-duration:        150ms;
  --hs-duration-slow:   250ms;
  --hs-duration-slower: 400ms;

  /* Z-index */
  --hs-z-nav:   200;
  --hs-z-modal: 300;
  --hs-z-toast: 400;
}

/* ── BASE ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--hs-font-body);
  background-color: var(--hs-black);
  color: var(--hs-text);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--hs-font-display);
  letter-spacing: var(--hs-tracking-tight);
}

input, textarea, select, button {
  font-family: var(--hs-font-body);
}

/* ── SURFACE OVERRIDES ───────────────────────────────────────────── */
.bg-black              { background-color: var(--hs-black) !important; }
.bg-neutral-950        { background-color: var(--hs-black) !important; }
.bg-neutral-900        { background-color: var(--hs-navy)  !important; }
.bg-neutral-800        { background-color: var(--hs-s1)    !important; }
.bg-neutral-700        { background-color: var(--hs-s2)    !important; }

/* Opacity surface variants */
.bg-neutral-950\/80    { background-color: rgba(12, 12, 18, 0.8)  !important; }
.bg-neutral-900\/50    { background-color: rgba(22, 17, 28, 0.5)  !important; }
.bg-neutral-900\/60    { background-color: rgba(22, 17, 28, 0.6)  !important; }
.bg-neutral-800\/50    { background-color: rgba(26, 21, 40, 0.5)  !important; }

/* Hover surface states */
.hover\:bg-neutral-900:hover { background-color: var(--hs-navy) !important; }
.hover\:bg-neutral-800:hover { background-color: var(--hs-s1)   !important; }
.hover\:bg-neutral-700:hover { background-color: var(--hs-s2)   !important; }

/* ── TEXT OVERRIDES ──────────────────────────────────────────────── */
.text-white       { color: var(--hs-text)  !important; }
.text-neutral-50  { color: var(--hs-text)  !important; }
.text-neutral-100 { color: var(--hs-text)  !important; }
.text-neutral-200 { color: #D8D3F0         !important; }
.text-neutral-300 { color: var(--hs-dim)   !important; }
.text-neutral-400 { color: var(--hs-dim)   !important; }
.text-neutral-500 { color: var(--hs-muted) !important; }
.text-neutral-600 { color: var(--hs-muted) !important; }

.hover\:text-white:hover        { color: var(--hs-text) !important; }
.hover\:text-neutral-200:hover  { color: #D8D3F0        !important; }

/* ── ACCENT: BLUE (was cyan / sky) ──────────────────────────────── */
.text-cyan-400        { color: var(--hs-blue) !important; }
.text-cyan-300        { color: #4DBFE8        !important; }
.text-sky-400         { color: var(--hs-blue) !important; }
.text-sky-500         { color: var(--hs-blue) !important; }
.hover\:text-cyan-300:hover { color: #4DBFE8  !important; }

.bg-cyan-950\/30      { background-color: rgba(35, 168, 227, 0.10) !important; }
.bg-cyan-950\/10      { background-color: rgba(35, 168, 227, 0.06) !important; }
.bg-sky-500\/20       { background-color: rgba(35, 168, 227, 0.12) !important; }

.from-sky-400         { --tw-gradient-from: var(--hs-blue) !important; }
.from-sky-500\/20     { --tw-gradient-from: rgba(35, 168, 227, 0.20) !important; }
.to-sky-400           { --tw-gradient-to:   var(--hs-blue) !important; }

/* ── ACCENT: PINK (was pink / rose / amber-orange for CTA) ──────── */
.text-pink-500        { color: var(--hs-pink) !important; }
.text-rose-400        { color: var(--hs-pink) !important; }
.text-rose-500        { color: var(--hs-pink) !important; }
.text-rose-300        { color: #f05a8a        !important; }
.hover\:text-rose-300:hover { color: #f05a8a !important; }
.hover\:text-red-400:hover  { color: var(--hs-pink) !important; }

.bg-pink-500                { background-color: var(--hs-pink)       !important; }
.hover\:bg-pink-600:hover   { background-color: var(--hs-pink-hover) !important; }
.bg-rose-900                { background-color: var(--hs-s1) !important; }
.hover\:bg-rose-800:hover   { background-color: var(--hs-pink-hover) !important; }
.bg-rose-900\/50            { background-color: rgba(230, 31, 102, 0.12) !important; }
.bg-rose-500\/20            { background-color: rgba(230, 31, 102, 0.12) !important; }

.text-rose-200              { color: #f9a8c9 !important; }

.shadow-\[0_0_15px_rgba\(225\,29\,72\,0\.3\)\] {
  box-shadow: 0 0 20px rgba(230, 31, 102, 0.25) !important;
}

/* PRO — amber/gold is intentional, not overridden */

/* Pink glow on primary buttons */
.shadow-\[0_0_15px_rgba\(225\,29\,72\,0\.3\)\] {
  box-shadow: var(--hs-glow-pink) !important;
}

/* Hero gradient text: from-sky-400 to-rose-600 */
.from-rose-600 { --tw-gradient-from: var(--hs-pink) !important; }
.to-rose-600   { --tw-gradient-to:   var(--hs-pink) !important; }

/* ── ACCENT: GREEN (was green / emerald) ─────────────────────────── */
.text-green-500         { color: var(--hs-green) !important; }
.text-emerald-400       { color: var(--hs-green) !important; }
.bg-emerald-500\/20     { background-color: rgba(6, 215, 0, 0.10) !important; }
.border-emerald-500\/30 { border-color: var(--hs-border-green) !important; }
.hover\:bg-emerald-500\/30:hover { background-color: rgba(6, 215, 0, 0.16) !important; }
.bg-green-500           { background-color: var(--hs-green) !important; }

/* ── ACCENT: PURPLE → BLUE remap ────────────────────────────────── */
.text-purple-500        { color: var(--hs-blue) !important; }
.bg-purple-900\/5       { background-color: rgba(35, 168, 227, 0.05) !important; }
.from-purple-500\/20    { --tw-gradient-from: rgba(35, 168, 227, 0.15) !important; }
.to-purple-500\/20      { --tw-gradient-to:   rgba(35, 168, 227, 0.05) !important; }

/* Orange orbs → pink */
.bg-orange-600\/5       { background-color: rgba(230, 31, 102, 0.05) !important; }

/* ── ACCENT: ORANGE → PINK remap (filter toggles, active states) ─── */
.text-orange-400         { color: var(--hs-pink) !important; }
.text-orange-100         { color: #ffc4d8       !important; }
.text-orange-500         { color: var(--hs-pink) !important; }
.bg-orange-500           { background-color: var(--hs-pink) !important; }
.bg-orange-900\/20       { background-color: rgba(230, 31, 102, 0.10) !important; }
.border-orange-500       { border-color: var(--hs-border-pink) !important; }
.hover\:border-orange-500\/30:hover { border-color: rgba(230, 31, 102, 0.20) !important; }

/* ── SKY BORDERS & FOCUS ─────────────────────────────────────────── */
.border-sky-500         { border-color: var(--hs-blue) !important; }
.border-sky-400         { border-color: var(--hs-blue) !important; }
.focus\:ring-sky-500:focus { box-shadow: var(--hs-glow-blue) !important; }
.focus\:border-sky-500:focus { border-color: var(--hs-blue) !important; }
.text-sky-50            { color: var(--hs-text) !important; }

/* ── HOVER TEXT LINKS ────────────────────────────────────────────── */
.hover\:text-sky-500:hover  { color: var(--hs-blue) !important; }
.hover\:text-sky-400:hover  { color: var(--hs-blue) !important; }
.hover\:text-rose-500:hover { color: var(--hs-pink) !important; }
.hover\:text-rose-300:hover { color: #f05a8a       !important; }
.hover\:text-red-400:hover  { color: var(--hs-pink) !important; }

/* Heart icon */
.text-red-900  { color: var(--hs-pink) !important; }
.fill-red-900  { fill: var(--hs-pink)  !important; }

/* ── BLACK OPACITY SURFACES ──────────────────────────────────────── */
.bg-black\/50  { background-color: rgba(12, 12, 18, 0.5)  !important; }
.bg-black\/60  { background-color: rgba(12, 12, 18, 0.6)  !important; }
.bg-black\/80  { background-color: rgba(12, 12, 18, 0.8)  !important; }

/* ── FILTER ACTIVE INPUT GLOW ────────────────────────────────────── */
.shadow-\[inset_0_0_10px_rgba\(56\,189\,248\,0\.1\)\] {
  box-shadow: inset 0 0 10px rgba(35, 168, 227, 0.12) !important;
}
.shadow-\[inset_0_0_10px_rgba\(34\,197\,94\,0\.1\)\] {
  box-shadow: inset 0 0 10px rgba(6, 215, 0, 0.10) !important;
}

/* ── HOVER CAROUSEL BUTTON (rose-900 hover → hs-pink) ───────────── */
.hover\:bg-rose-900:hover { background-color: var(--hs-pink) !important; }

/* ── ACTIVE INPUT BACKGROUND (rose-900/20 used for sky-active) ───── */
.bg-rose-900\/20 { background-color: rgba(35, 168, 227, 0.08) !important; }

/* ── BORDER OVERRIDES ────────────────────────────────────────────── */
.border-neutral-800       { border-color: var(--hs-border)              !important; }
.border-neutral-700       { border-color: rgba(255, 255, 255, 0.10)     !important; }
.border-rose-500\/30      { border-color: var(--hs-border-pink)         !important; }
.border-rose-800          { border-color: var(--hs-border-pink)         !important; }
.border-white\/10         { border-color: var(--hs-border)              !important; }
.divide-neutral-800\/50 > * + * { border-color: var(--hs-border) !important; }

/* ── BORDER-RADIUS OVERRIDES ─────────────────────────────────────── */
/* Brand uses tight radii: max 4px for cards/panels, 100px for pills only */
.rounded-lg  { border-radius: var(--hs-radius-md) !important; }  /* 4px */
.rounded-xl  { border-radius: var(--hs-radius-md) !important; }  /* 4px */
.rounded-2xl { border-radius: 6px               !important; }
.rounded-3xl { border-radius: 8px               !important; }
.rounded-md  { border-radius: var(--hs-radius)   !important; }  /* 3px */
/* rounded-full stays intact for avatar circles and status dots */

/* ── FONT OVERRIDES ──────────────────────────────────────────────── */
.font-black,
.font-extrabold,
.font-bold {
  font-family: var(--hs-font-display);
}

/* Mono: badges, labels, timestamps, tiny uppercase caps */
.text-\[10px\].uppercase,
.tracking-wider,
.tracking-widest,
.font-mono {
  font-family: var(--hs-font-mono);
}

/* ── SCROLLBAR ───────────────────────────────────────────────────── */
::-webkit-scrollbar        { width: 6px; height: 6px; }
::-webkit-scrollbar-track  { background: var(--hs-navy); }
::-webkit-scrollbar-thumb  { background: var(--hs-s2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.15); }

/* ── ANIMATIONS ──────────────────────────────────────────────────── */
@keyframes hs-pulse-green {
  0%, 100% { box-shadow: 0 0 0 3px rgba(6, 215, 0, 0.2); }
  50%       { box-shadow: 0 0 0 6px rgba(6, 215, 0, 0.1); }
}
@keyframes hs-pulse-blue {
  0%, 100% { box-shadow: 0 0 0 3px rgba(35, 168, 227, 0.2); }
  50%       { box-shadow: 0 0 0 6px rgba(35, 168, 227, 0.1); }
}

/* ── FOCUS RING ──────────────────────────────────────────────────── */
.focus\:ring-neutral-500:focus { box-shadow: var(--hs-glow-blue) !important; }
.focus\:ring-rose-900:focus    { box-shadow: var(--hs-glow-pink) !important; }

/* ── NAVBAR BRAND ────────────────────────────────────────────────── */
.hs-wordmark {
  font-family: var(--hs-font-display);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: var(--hs-tracking-tight);
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 0;
}
.hs-wordmark .hop   { color: var(--hs-blue); }
.hs-wordmark .squad { color: var(--hs-pink); }
.hs-wordmark .gg    { color: var(--hs-blue); font-size: 12px; opacity: 0.75; margin-left: 1px; }

/* ── BUTTONS ─────────────────────────────────────────────────────── */
.hs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--hs-font-body);
  font-size: 14px;
  font-weight: 600;
  border: none;
  border-radius: var(--hs-radius);
  cursor: pointer;
  transition: all var(--hs-duration) var(--hs-ease);
  white-space: nowrap;
  text-decoration: none;
}
.hs-btn:disabled { opacity: 0.45; pointer-events: none; }

.hs-btn-primary  { background: var(--hs-pink); color: #fff; padding: 11px 22px; }
.hs-btn-primary:hover  { background: var(--hs-pink-hover); transform: translateY(-1px); }

.hs-btn-secondary {
  background: transparent;
  color: var(--hs-blue);
  border: 1.5px solid var(--hs-blue);
  padding: 10px 22px;
}
.hs-btn-secondary:hover { background: rgba(35, 168, 227, 0.10); }

.hs-btn-success  { background: var(--hs-green); color: #000; font-weight: 700; padding: 11px 22px; }
.hs-btn-success:hover  { background: var(--hs-green-hover); transform: translateY(-1px); }

.hs-btn-ghost {
  background: rgba(255, 255, 255, 0.06);
  color: var(--hs-text);
  border: 1px solid var(--hs-border);
  padding: 11px 22px;
}
.hs-btn-ghost:hover { background: rgba(255, 255, 255, 0.10); }

.hs-btn-sm { padding: 7px 14px !important; font-size: 12px; }
.hs-btn-lg { padding: 14px 28px !important; font-size: 16px; }

/* Steam button */
.hs-btn-steam {
  background: #1a1f2e;
  color: #c5c3c0;
  border: 1px solid rgba(35, 168, 227, 0.2);
  padding: 11px 22px;
}
.hs-btn-steam:hover { background: #232a3e; color: var(--hs-text); }

/* ── BADGES ──────────────────────────────────────────────────────── */
.hs-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  font-family: var(--hs-font-mono);
  font-size: 10px;
  letter-spacing: var(--hs-tracking-wide);
  text-transform: uppercase;
  font-weight: 500;
  border-radius: var(--hs-radius-sm);
}
.hs-badge-verified { background: rgba(35, 168, 227, 0.12); color: var(--hs-blue);  border: 1px solid var(--hs-border-blue);  }
.hs-badge-live     { background: rgba(230, 31, 102, 0.12); color: var(--hs-pink);  border: 1px solid var(--hs-border-pink);  }
.hs-badge-online   { background: rgba(6, 215, 0, 0.12);    color: var(--hs-green); border: 1px solid var(--hs-border-green); }
.hs-badge-rank     { background: rgba(255, 215, 0, 0.10);  color: #FFD700;          border: 1px solid rgba(255, 215, 0, 0.22); }
.hs-bdot           { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ── STATUS INDICATORS ───────────────────────────────────────────── */
.hs-status { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--hs-dim); }
.hs-sdot   { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.hs-sdot-online  { background: var(--hs-green); box-shadow: 0 0 0 3px rgba(6, 215, 0, 0.2); }
.hs-sdot-ingame  { background: var(--hs-blue);  animation: hs-pulse-blue 2s infinite; }
.hs-sdot-away    { background: #FBBF24; }
.hs-sdot-offline { background: var(--hs-muted); }

/* ── CARDS ───────────────────────────────────────────────────────── */
.hs-card {
  background: var(--hs-s2);
  border: 1px solid var(--hs-border);
  border-radius: var(--hs-radius-md);
  padding: 18px;
}
.hs-card-title {
  font-family: var(--hs-font-display);
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--hs-text);
}
.hs-card-meta {
  font-size: 12px;
  color: var(--hs-dim);
  font-family: var(--hs-font-mono);
}

/* ── TAGS ────────────────────────────────────────────────────────── */
.hs-tag {
  font-family: var(--hs-font-mono);
  font-size: 10px;
  padding: 3px 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--hs-border);
  border-radius: var(--hs-radius-sm);
  color: var(--hs-dim);
}

/* ── FORM INPUTS ─────────────────────────────────────────────────── */
.hs-input {
  background: var(--hs-s2);
  border: 1.5px solid var(--hs-border);
  border-radius: var(--hs-radius);
  padding: 10px 15px;
  font-family: var(--hs-font-body);
  font-size: 14px;
  color: var(--hs-text);
  outline: none;
  transition: border-color var(--hs-duration) var(--hs-ease);
  width: 100%;
}
.hs-input::placeholder { color: var(--hs-muted); }
.hs-input:focus { border-color: var(--hs-blue); box-shadow: var(--hs-glow-blue); }

/* ── LABEL / MONO CAPTION ────────────────────────────────────────── */
.hs-label {
  font-family: var(--hs-font-mono);
  font-size: 11px;
  letter-spacing: var(--hs-tracking-wider);
  text-transform: uppercase;
  color: var(--hs-muted);
}

/* ── TOAST ───────────────────────────────────────────────────────── */
.hs-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: var(--hs-s1);
  border: 1px solid var(--hs-border);
  border-radius: var(--hs-radius-md);
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--hs-shadow);
}
.hs-toast-success { border-left: 3px solid var(--hs-green); }
.hs-toast-error   { border-left: 3px solid var(--hs-pink); }

/* ── BACKGROUND DECORATIVE ───────────────────────────────────────── */
.hs-bg-grid {
  background-image:
    linear-gradient(rgba(35, 168, 227, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(35, 168, 227, 0.04) 1px, transparent 1px);
  background-size: 40px 40px;
}
.hs-bg-orb-pink {
  background: radial-gradient(circle, rgba(230, 31, 102, 0.18) 0%, transparent 70%);
}
.hs-bg-orb-blue {
  background: radial-gradient(circle, rgba(35, 168, 227, 0.15) 0%, transparent 70%);
}

/* ── TYPOGRAPHY UTILITIES ────────────────────────────────────────── */
.hs-display {
  font-family: var(--hs-font-display);
  font-size: var(--hs-text-display);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: var(--hs-tracking-tight);
}
.hs-h1 {
  font-family: var(--hs-font-display);
  font-size: var(--hs-text-h1);
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: var(--hs-tracking-tight);
}
.hs-h2 {
  font-family: var(--hs-font-display);
  font-size: var(--hs-text-h2);
  font-weight: 700;
  line-height: 1.1;
}
.hs-h3 {
  font-family: var(--hs-font-display);
  font-size: var(--hs-text-h3);
  font-weight: 700;
  line-height: 1.2;
}
.hs-body {
  font-family: var(--hs-font-body);
  font-size: var(--hs-text-body);
  line-height: 1.6;
  color: var(--hs-dim);
}

/* ── RADIUS — tighten rounded-3xl ───────────────────────────────── */
.rounded-3xl { border-radius: 8px !important; }

/* ── OPACITY VARIANT OVERRIDES ───────────────────────────────────── */
/* rose-500/x → brand pink tints */
.bg-rose-500\/10 { background-color: rgba(230, 31, 102, 0.08) !important; }
.bg-rose-500\/20 { background-color: rgba(230, 31, 102, 0.14) !important; }
/* border rose */
.border-rose-800  { border-color: rgba(230, 31, 102, 0.35) !important; }
.border-rose-500\/50 { border-color: rgba(230, 31, 102, 0.50) !important; }
/* border orange opacity variants → brand pink */
.border-orange-500\/30 { border-color: rgba(230, 31, 102, 0.30) !important; }
.border-orange-500\/50 { border-color: rgba(230, 31, 102, 0.50) !important; }
.hover\:border-orange-500\/50:hover { border-color: rgba(230, 31, 102, 0.50) !important; }
/* bg orange opacity variants → brand pink */
.bg-orange-900\/20 { background-color: rgba(230, 31, 102, 0.08) !important; }
/* rose-900/x → brand pink tints */
.bg-rose-900\/10 { background-color: rgba(230, 31, 102, 0.06) !important; }
.bg-rose-900\/20 { background-color: rgba(230, 31, 102, 0.10) !important; }
.bg-rose-900\/30 { background-color: rgba(230, 31, 102, 0.15) !important; }
.bg-rose-900\/50 { background-color: rgba(230, 31, 102, 0.22) !important; }
/* sky-500/x → brand blue tints */
.bg-sky-500\/10  { background-color: rgba(35, 168, 227, 0.08) !important; }
.bg-sky-500\/20  { background-color: rgba(35, 168, 227, 0.15) !important; }
.bg-sky-500\/30  { background-color: rgba(35, 168, 227, 0.22) !important; }
/* sky-900/x → brand blue tints */
.bg-sky-900\/10  { background-color: rgba(35, 168, 227, 0.05) !important; }
.bg-sky-900\/20  { background-color: rgba(35, 168, 227, 0.08) !important; }
.bg-sky-900\/50  { background-color: rgba(35, 168, 227, 0.12) !important; }
/* emerald-500/x → brand green tints */
.bg-emerald-500\/10 { background-color: rgba(6, 215, 0, 0.07) !important; }
.bg-emerald-500\/20 { background-color: rgba(6, 215, 0, 0.13) !important; }
.bg-emerald-500\/30 { background-color: rgba(6, 215, 0, 0.20) !important; }
/* border opacity variants */
.border-sky-500\/30   { border-color: rgba(35, 168, 227, 0.30) !important; }
.border-sky-500\/50   { border-color: rgba(35, 168, 227, 0.50) !important; }
.border-rose-500\/30  { border-color: rgba(230, 31, 102, 0.30) !important; }
.border-emerald-500\/20 { border-color: rgba(6, 215, 0, 0.20) !important; }
.border-emerald-500\/30 { border-color: rgba(6, 215, 0, 0.30) !important; }
/* text opacity variants */
.text-sky-200    { color: rgba(35, 168, 227, 0.80) !important; }
.text-rose-200   { color: rgba(230, 31, 102, 0.60) !important; }
.text-emerald-200 { color: rgba(6, 215, 0, 0.70) !important; }

/* ── HOW IT WORKS — Menu Animations ──────────────────────────── */
@keyframes hs-modal-in {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes hs-card-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-modal-in {
  animation: hs-modal-in 0.25s var(--hs-ease) forwards;
}
.animate-card-in {
  animation: hs-card-in 0.35s var(--hs-ease-out) forwards;
  opacity: 0;
}