/**
 * JAYBEAR ATL / The BARE CAVE - canonical design tokens
 * Source of truth for color, type, radius, glass, glows, and status semantics.
 * Load this before page CSS on every surface.
 */
:root {
  /* Surfaces - slightly richer violet-black so video doesn't crush */
  --bg0: #08040f;
  --bg1: #0d0618;
  --bg-elevated: rgba(255, 255, 255, 0.045);

  /* Text */
  --ink: #f6f2ff;
  --muted: #c9bdf0; /* bumped for small-text readability */

  /* Brand neon (roles below) */
  --pink: #ff3bd4;   /* brand flourish */
  --blue: #31e3ff;   /* live / join */
  --violet: #9b5cff; /* ambient / closed */
  --lime: #b7ff4a;   /* success / open */
  --gold: #ffd35c;   /* soft attention / offline */
  --orange: #ff6b35;
  --red: #ff3355;    /* error / hard offline */
  --gray: #6b7280;

  /* Glass + structure */
  --glass: rgba(255, 255, 255, 0.07);
  --glass2: rgba(255, 255, 255, 0.11);
  --glass-strong: rgba(255, 255, 255, 0.12);
  --line: rgba(255, 255, 255, 0.14);
  --shadow: rgba(0, 0, 0, 0.58);
  --radius: 18px;
  --radius-pill: 999px;
  --max: 1120px;

  /* Glows - keep in sync with hex above */
  --glow-pink: 0 0 12px rgba(255, 59, 212, 0.55), 0 0 30px rgba(255, 59, 212, 0.32);
  --glow-blue: 0 0 12px rgba(49, 227, 255, 0.5), 0 0 30px rgba(49, 227, 255, 0.28);
  --glow-violet: 0 0 14px rgba(155, 92, 255, 0.52), 0 0 34px rgba(155, 92, 255, 0.28);
  --glow-lime: 0 0 14px rgba(183, 255, 74, 0.42), 0 0 34px rgba(183, 255, 74, 0.18);
  --glow-gold: 0 0 14px rgba(255, 211, 92, 0.5), 0 0 34px rgba(255, 211, 92, 0.28);
  --glow-red: 0 0 14px rgba(255, 51, 85, 0.55), 0 0 34px rgba(255, 51, 85, 0.32);
  --ring: 0 0 0 3px rgba(49, 227, 255, 0.24), 0 0 30px rgba(49, 227, 255, 0.16);

  /* Ambient page wash */
  --bg-radial-1: rgba(155, 92, 255, 0.22);
  --bg-radial-2: rgba(49, 227, 255, 0.16);
  --bg-radial-3: rgba(255, 59, 212, 0.14);

  /* Status semantics - one language sitewide */
  --status-open: var(--lime);
  --status-open-soft: rgba(183, 255, 74, 0.16);
  --status-open-line: rgba(183, 255, 74, 0.42);
  --status-closed: var(--violet);
  --status-closed-soft: rgba(155, 92, 255, 0.14);
  --status-closed-line: rgba(155, 92, 255, 0.36);
  --status-offline: var(--gold);
  --status-offline-soft: rgba(255, 211, 92, 0.14);
  --status-offline-line: rgba(255, 211, 92, 0.4);
  --status-offline-hard: var(--red);

  /* Chime - brand-tinted green (quieter than retail green) */
  --chime: #30c48d;
  --chime-soft: rgba(48, 196, 141, 0.14);
  --chime-line: rgba(48, 196, 141, 0.38);
  --chime-ink: #d8f5e8;

  /* Type */
  --font-display: "Bebas Neue", Impact, ui-sans-serif, sans-serif;
  --font-body: "Outfit", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --tracking-label: 0.12em;
  --tracking-body: 0;
}

/* Type roles - use these classes or element defaults below */
.font-display,
.headline-font,
h1, h2, h3 {
  font-family: var(--font-display);
  letter-spacing: 0.04em;
  font-weight: 400;
}

.font-label,
.card-label,
.label-caps {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.font-body,
body {
  font-family: var(--font-body);
  letter-spacing: var(--tracking-body);
}

/* Default page atmosphere when body doesn't set its own */
body.jb-surface {
  color: var(--ink);
  background:
    radial-gradient(1200px 700px at 10% 0%, var(--bg-radial-1), transparent 60%),
    radial-gradient(900px 620px at 92% 12%, var(--bg-radial-2), transparent 58%),
    radial-gradient(940px 620px at 50% 112%, var(--bg-radial-3), transparent 62%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  background-attachment: fixed;
}