/* JiveFinder brand system — "The Dance Route"
   Tokens mirror tailwind.config in brand_head.html so utilities and raw CSS agree. */
:root {
  --jf-navy:    #0B1022; /* header / nav / footer */
  --jf-navy-2:  #131A33; /* raised navy surfaces */
  --jf-pink:    #FF3EA5; /* primary accent / CTA */
  --jf-violet:  #7B61FF; /* secondary accent / logo end */
  --jf-route:   #2E7BFF; /* map route / planner / max range */
  --jf-success: #22C55E; /* ideal range / positive */
  --jf-amber:   #F59E0B; /* freestyle highlight */
  --jf-mist:    #F5F7FB; /* app background */
  --jf-ink:     #1F2937; /* primary text */
  --jf-slate:   #64748B; /* muted text */

  /* unified event-category colours (used by JS + legends) */
  --cat-freestyle:        #F59E0B;
  --cat-class:            #2E7BFF;
  --cat-class-freestyle:  #FF3EA5;
  --cat-social:           #22C55E;
  --cat-workshop:         #7B61FF;
  --cat-weekender:        #F97316;
  --cat-competition:      #DC2626;

  --jf-grad: linear-gradient(135deg, var(--jf-violet) 0%, var(--jf-pink) 100%);
}

body { font-family: 'Inter', system-ui, sans-serif; }
h1, h2, h3, h4, .font-display { font-family: 'Manrope', 'Inter', sans-serif; }

/* ---- Logo mark ---- */
.jf-mark { height: 31px; width: auto; display: block; flex: none; }

/* ---- Brand wordmark ---- */
.brand-wordmark { font-family: 'Manrope', sans-serif; font-weight: 800; letter-spacing: -0.02em; }
.brand-gradient-text {
  background: var(--jf-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ---- Primary CTA ---- */
.btn-primary {
  background: var(--jf-grad); color: #fff; font-weight: 600;
  border-radius: 0.6rem; transition: filter .15s ease, transform .05s ease;
  box-shadow: 0 6px 18px -6px rgba(255, 62, 165, .55);
}
.btn-primary:hover { filter: brightness(1.07); }
.btn-primary:active { transform: translateY(1px); }
.btn-ghost {
  background: transparent; color: var(--jf-violet); font-weight: 600;
  border: 1px solid color-mix(in srgb, var(--jf-violet) 35%, transparent);
  border-radius: 0.6rem; transition: background .15s ease;
}
.btn-ghost:hover { background: color-mix(in srgb, var(--jf-violet) 10%, transparent); }

/* ---- Category badges ---- */
.badge {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: 11px; font-weight: 700; line-height: 1;
  padding: .28rem .5rem; border-radius: 999px; white-space: nowrap;
}
.badge::before { content: ""; width: .5rem; height: .5rem; border-radius: 999px; background: currentColor; }
.badge-freestyle       { color: var(--cat-freestyle);       background: color-mix(in srgb, var(--cat-freestyle) 14%, #fff); }
.badge-class           { color: var(--cat-class);           background: color-mix(in srgb, var(--cat-class) 12%, #fff); }
.badge-class-freestyle { color: var(--cat-class-freestyle); background: color-mix(in srgb, var(--cat-class-freestyle) 13%, #fff); }
.badge-social          { color: var(--cat-social);          background: color-mix(in srgb, var(--cat-social) 14%, #fff); }
.badge-workshop        { color: var(--cat-workshop);        background: color-mix(in srgb, var(--cat-workshop) 13%, #fff); }
.badge-weekender       { color: var(--cat-weekender);       background: color-mix(in srgb, var(--cat-weekender) 14%, #fff); }
.badge-competition     { color: var(--cat-competition);     background: color-mix(in srgb, var(--cat-competition) 13%, #fff); }
.badge-default         { color: var(--jf-violet);           background: color-mix(in srgb, var(--jf-violet) 12%, #fff); }

/* ---- Sub-brand lozenge (Trip Planner) ---- */
.subbrand-pill {
  font-family: 'Manrope', sans-serif; font-weight: 700; font-size: .8rem;
  color: #fff; background: var(--jf-grad);
  padding: .15rem .55rem; border-radius: 999px; letter-spacing: .01em;
}

/* ---- Event card ---- */
.jf-card {
  background: #fff; border: 1px solid #E8EBF2; border-radius: 0.85rem;
  transition: box-shadow .15s ease, border-color .15s ease, transform .05s ease;
}
.jf-card:hover { box-shadow: 0 10px 24px -14px rgba(11,16,34,.35); border-color: color-mix(in srgb, var(--jf-violet) 30%, #E8EBF2); }

/* ---- Range chips ---- */
.chip { font-size: 11px; font-weight: 700; padding: .15rem .45rem; border-radius: 999px; }
.chip-ideal       { color: var(--jf-success); background: color-mix(in srgb, var(--jf-success) 15%, #fff); }
.chip-max         { color: var(--jf-route);   background: color-mix(in srgb, var(--jf-route) 13%, #fff); }
.chip-inefficient { color: #EA580C;           background: #FFF1E8; }

/* ---- Route-dot dance-path texture (subtle, decorative) ---- */
.route-texture {
  background-image: radial-gradient(circle, rgba(255,255,255,.07) 1.4px, transparent 1.6px);
  background-size: 22px 22px;
}

/* ---- Empty state ---- */
.jf-empty { color: var(--jf-slate); font-size: 13px; line-height: 1.5; }
.jf-empty strong { color: var(--jf-ink); font-weight: 700; }