/* =================================================================
   THE ARENA — Brand & Theme Tokens
   Sacred Studios rep-facing sales app. Crimson + the eye, dark.
   Single source of truth for color, type, spacing, motion. Each ROOM
   view self-injects its own scoped <style>; this file is the shared
   foundation + the shell chrome (topbar, bottom-nav, lock, ring).
   ================================================================= */

:root {
  /* ---- Surfaces: Midnight ---- */
  --bg-0: #0a0b10;
  --bg-1: #101117;
  --bg-2: #14151a;
  --bg-3: #1d1f27;
  --bg-glass: rgba(20, 21, 26, 0.66);
  --bg-glass-strong: rgba(29, 31, 39, 0.92);

  --line: rgba(237, 231, 218, 0.10);
  --line-strong: rgba(237, 231, 218, 0.22);
  --border: var(--line);
  --border-strong: var(--line-strong);

  /* ---- Text ---- */
  --text-0: #ffffff;
  --text-1: #ede7da;
  --text-2: #b7b0a3;
  --text-3: #837c70;
  --text-dim: #585249;
  --mut: #8b93a3;
  --dim: #5b6371;

  /* ---- Sacred accent: Crimson (brand primary #C41230) ---- */
  --accent: #c41230;
  --accent-2: #d81b3a;
  --accent-3: #8e0c22;
  --accent-glow: rgba(196, 18, 48, 0.35);
  --crimson: #c41230;

  /* Brighter crimson for live/chrome cues */
  --hot: #ff2d46;
  --hot-2: #ff5c6e;
  --hot-glow: rgba(255, 45, 70, 0.36);
  --hot-wash: rgba(255, 45, 70, 0.12);

  /* ---- Secondary / status ---- */
  --gold: #c8a158;
  --good: #34d399;
  --emerald: #4ade80;
  --azure: #60a5fa;
  --warn: #f5a623;
  --bad: #f87171;

  /* ---- Signature gradients ---- */
  --grad-sacred: linear-gradient(135deg, #d81b3a 0%, #c41230 55%, #8e0c22 110%);
  --grad-hot: linear-gradient(90deg, #ff5c6e, #ff2d46);
  --grad-soft: linear-gradient(135deg, rgba(196,18,48,0.16), rgba(200,161,88,0.10));

  /* ---- Layout ---- */
  --maxw: 720px;
  --topbar-h: 60px;
  --bottomnav-h: 64px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);

  /* ---- Effects ---- */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.32);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.42);
  --shadow-lg: 0 24px 70px rgba(0, 0, 0, 0.55);
  --shadow-glow: 0 0 36px var(--accent-glow);

  --radius-xs: 6px;
  --radius-sm: 9px;
  --radius: 13px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  --font: 'Montserrat', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

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

html, body {
  height: 100%;
  background: var(--bg-0);
  color: var(--text-1);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  background:
    radial-gradient(1100px 700px at 88% -8%, rgba(196, 18, 48, 0.14), transparent 60%),
    radial-gradient(1000px 760px at 6% 4%, rgba(255, 45, 70, 0.10), transparent 58%),
    var(--bg-0);
  min-height: 100%;
  overscroll-behavior-y: none;
}

h1, h2, h3, h4, .display { font-family: var(--font); }

::selection { background: var(--accent-glow); color: var(--text-0); }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 99px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-3); background-clip: content-box; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
a, button { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
input, textarea, select { font-family: inherit; }

/* ---- Shared helper classes (available to every room view) ---- */
.arena-card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px;
}
.arena-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 18px; border-radius: var(--radius); font-weight: 650; font-size: 14px;
  background: var(--bg-3); color: var(--text-1); border: 1px solid var(--line);
  transition: transform .12s var(--ease), filter .12s var(--ease);
}
.arena-btn:active { transform: translateY(1px); }
.arena-btn.primary {
  background: var(--grad-sacred); color: #fff; border: none;
  box-shadow: 0 6px 20px var(--accent-glow);
}
.arena-btn.primary:hover { filter: brightness(1.06); }
.arena-btn:disabled { opacity: .5; cursor: default; }
.arena-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: var(--radius-pill);
  font-size: 11.5px; font-weight: 650; background: var(--bg-3);
  border: 1px solid var(--line); color: var(--text-2);
}
.brand-gradient-text {
  background: var(--grad-sacred);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.muted { color: var(--mut); }
.tnum { font-variant-numeric: tabular-nums; }

.section-head { margin: 4px 0 16px; }
.section-head h2 { font-size: 19px; font-weight: 800; letter-spacing: -.01em; color: var(--text-0); }
.section-head .sub { display: block; font-size: 12.5px; color: var(--mut); margin-top: 3px; }