/* Silver Glider Events — brand tokens (from silverglidertickets.com) */
@import url('https://fonts.googleapis.com/css2?family=Sulphur+Point:wght@400;700&family=Montserrat:wght@400;500;600;700;800;900&display=swap');

:root {
  --sg-bg: #0E0E0E;
  --sg-surface: #131315;
  --sg-card: #111111;
  --sg-border: rgba(255, 255, 255, 0.08);
  --sg-border-soft: rgba(255, 255, 255, 0.05);
  --sg-accent: #1CC5BE;
  --sg-accent-press: #0FA39D;
  --sg-text: #f0f0f0;
  --sg-text-dim: #999999;
  --sg-text-faint: #555555;
  --sg-danger: #e05252;
  --sg-radius-card: 24px;
  --sg-radius-input: 12px;
  --sg-font-display: 'Sulphur Point', -apple-system, sans-serif;
  --sg-font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sg-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--sg-bg);
  color: var(--sg-text);
  font-family: var(--sg-font-body);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

h1, h2, h3, .sg-display {
  font-family: var(--sg-font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

a { color: var(--sg-accent); text-decoration: none; }

/* Uppercase micro-label */
.sg-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--sg-text-faint);
}

/* Pill buttons — one primary CTA per screen */
.sg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: 999px;
  padding: 14px 28px;
  font-family: var(--sg-font-body);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
}
.sg-btn-primary { background: var(--sg-accent); color: #0a0a0a; }
.sg-btn-primary:hover { background: var(--sg-accent-press); transform: translateY(-1px); }
.sg-btn-primary:disabled { background: #2a2a2a; color: #666; cursor: not-allowed; transform: none; }
.sg-btn-ghost {
  background: transparent;
  color: var(--sg-text);
  border: 1px solid var(--sg-border);
}
.sg-btn-ghost:hover { border-color: var(--sg-accent); color: var(--sg-accent); }
.sg-btn-danger { background: transparent; color: var(--sg-danger); border: 1px solid rgba(224, 82, 82, 0.3); }
.sg-btn-danger:hover { border-color: var(--sg-danger); }
.sg-btn-block { display: flex; width: 100%; }

/* Cards */
.sg-card {
  background: var(--sg-card);
  border: 1px solid var(--sg-border-soft);
  border-radius: var(--sg-radius-card);
  padding: 28px;
}

/* Form fields */
.sg-field { margin-bottom: 20px; }
.sg-field label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--sg-text-dim);
  margin-bottom: 8px;
}
.sg-input, .sg-select, .sg-textarea {
  width: 100%;
  background: var(--sg-surface);
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-radius-input);
  color: var(--sg-text);
  font-family: var(--sg-font-body);
  font-size: 16px; /* prevents iOS zoom on focus */
  padding: 13px 16px;
  transition: border-color 0.15s ease;
}
.sg-input:focus, .sg-select:focus, .sg-textarea:focus {
  outline: none;
  border-color: var(--sg-accent);
}
.sg-textarea { resize: vertical; min-height: 110px; }

/* Event background themes — colored glows spread across the whole page (top
   AND bottom) so the drifting animation carries color everywhere. Kept deep so
   white text stays legible. Shared by the form swatches and the public page. */
.bg-theme {
  background-color: var(--sg-bg);
  background-repeat: no-repeat;
  background-position: top center;
}
.bg-midnight {
  background-image:
    radial-gradient(60% 45% at 20% 2%, #26262f, transparent 62%),
    radial-gradient(60% 50% at 85% 98%, #202028, transparent 62%);
}
.bg-aurora {
  background-image:
    radial-gradient(58% 45% at 10% 4%, rgba(28,197,190,.55), transparent 60%),
    radial-gradient(58% 45% at 92% 12%, rgba(255,138,42,.5), transparent 60%),
    radial-gradient(65% 52% at 86% 96%, rgba(28,197,190,.4), transparent 62%),
    radial-gradient(58% 48% at 12% 90%, rgba(255,138,42,.35), transparent 62%);
}
.bg-sunset {
  background-image:
    radial-gradient(60% 46% at 45% 2%, rgba(255,92,58,.6), transparent 62%),
    radial-gradient(55% 42% at 88% 14%, rgba(255,193,92,.45), transparent 60%),
    radial-gradient(68% 54% at 18% 98%, rgba(255,92,58,.42), transparent 62%),
    radial-gradient(55% 46% at 90% 88%, rgba(255,150,90,.35), transparent 62%);
}
.bg-ocean {
  background-image:
    radial-gradient(58% 45% at 24% 3%, rgba(0,140,255,.5), transparent 62%),
    radial-gradient(58% 44% at 90% 12%, rgba(28,197,190,.5), transparent 60%),
    radial-gradient(68% 54% at 80% 97%, rgba(0,140,255,.4), transparent 62%),
    radial-gradient(55% 46% at 12% 90%, rgba(28,197,190,.35), transparent 62%);
}
.bg-violet {
  background-image:
    radial-gradient(60% 46% at 48% 2%, rgba(150,80,255,.55), transparent 62%),
    radial-gradient(55% 42% at 14% 12%, rgba(80,90,255,.4), transparent 60%),
    radial-gradient(68% 54% at 84% 96%, rgba(150,80,255,.42), transparent 62%),
    radial-gradient(55% 46% at 16% 92%, rgba(80,90,255,.32), transparent 62%);
}
.bg-ember {
  background-image:
    radial-gradient(60% 46% at 48% 2%, rgba(255,64,90,.55), transparent 62%),
    radial-gradient(55% 42% at 86% 12%, rgba(255,150,40,.4), transparent 60%),
    radial-gradient(68% 54% at 20% 98%, rgba(255,64,90,.4), transparent 62%),
    radial-gradient(55% 46% at 88% 90%, rgba(255,150,40,.32), transparent 62%);
}

/* Small swatch version for the form picker (self-contained, not fixed) */
.sg-swatch {
  width: 100%;
  height: 46px;
  border-radius: 12px;
  border: 2px solid transparent;
  cursor: pointer;
  background-color: var(--sg-bg);
  background-repeat: no-repeat;
  background-position: center -6px;
  background-size: 140% 200%;
  transition: border-color 0.15s ease, transform 0.1s ease;
}
.sg-swatch:hover { transform: translateY(-1px); }
.sg-swatch.on { border-color: var(--sg-accent); }

/* Moving aurora background for the organizer app pages (dashboard, events,
   forms, settings, login). Sits behind content via negative z-index so no
   layout needs to opt in. Public event pages use their own picked theme. */
.sg-aurora {
  position: fixed;
  inset: -12%;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(48% 40% at 12% 6%, rgba(255,138,42,.30), transparent 60%),
    radial-gradient(48% 40% at 90% 8%, rgba(28,197,190,.22), transparent 60%),
    radial-gradient(55% 46% at 86% 95%, rgba(255,138,42,.22), transparent 62%),
    radial-gradient(50% 42% at 14% 94%, rgba(28,197,190,.18), transparent 62%);
  animation: sg-aurora-drift 26s ease-in-out infinite alternate;
  will-change: transform;
}
/* Darken toward the content so text stays legible over the color */
.sg-aurora-veil {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(130% 90% at 50% 22%, transparent 0%, rgba(14,14,14,.5) 72%, rgba(14,14,14,.82) 100%);
}
@keyframes sg-aurora-drift {
  from { transform: translate3d(-2.5%, -2%, 0) scale(1.06); }
  to   { transform: translate3d(2.5%, 2.5%, 0) scale(1.16); }
}
@media (prefers-reduced-motion: reduce) { .sg-aurora { animation: none; } }

/* Badges */
.sg-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--sg-border);
  color: var(--sg-text-dim);
}
.sg-badge-accent { color: var(--sg-accent); border-color: rgba(28, 197, 190, 0.35); }
.sg-badge-danger { color: var(--sg-danger); border-color: rgba(224, 82, 82, 0.35); }