/* ═══════════════════════════════════════════════════════════════════════════
   base.css — design tokens, reset, root layout
   Everything here is foundational; other stylesheets build on these vars.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Surface colours ────────────────────────────────────────────────── */
  --bg-sidebar:        #1c1917;
  --bg-sidebar-elev:   #292524;
  --bg-sidebar-elev-2: #34302c;
  --modal-bg:          #fbf8f1;
  --modal-bg-elev:     #f5f1e8;

  /* ── Text ───────────────────────────────────────────────────────────── */
  --text-primary:    #fafaf9;
  --text-secondary:  #a8a29e;
  --text-muted:      #78716c;
  --modal-text:      #1c1917;
  --modal-text-soft: #57534e;

  /* ── Borders ────────────────────────────────────────────────────────── */
  --border:        #44403c;
  --border-soft:   #292524;
  --modal-border:  #e7e5e4;

  /* ── Accent / status ────────────────────────────────────────────────── */
  --accent:       #d97706;
  --accent-hover: #b45309;
  --accent-soft:  rgba(217, 119, 6, 0.12);
  --danger:       #dc2626;
  --danger-soft:  #fef2f2;
  --success:      #16a34a;

  /* ── Elevation ──────────────────────────────────────────────────────── */
  --shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 10px 25px -5px rgba(0, 0, 0, 0.15);

  /* ── Typefaces ──────────────────────────────────────────────────────── */
  --serif: 'Fraunces', Georgia, serif;
  --sans:  'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
}

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

html, body { height: 100%; overflow: hidden; }
body {
  font-family: var(--sans);
  color: var(--text-primary);
  /* The body bg matches the sidebar so when the iOS web-app fullscreen
     mode rubber-bands or shows the bezel area, nothing looks off-white. */
  background: var(--bg-sidebar);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#app { position: relative; height: 100vh; overflow: hidden; }

/* ══════════════════════════════════════════════════════════════════════════
   Preloader overlay
   ══════════════════════════════════════════════════════════════════════════ */
#rtp-preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg-primary, #1c1917);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
#rtp-preloader.preloader-visible {
  opacity: 1;
  pointer-events: all;
}
#rtp-preloader.preloader-hiding {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.preloader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
}

.preloader-wordmark {
  font-size: 2.4rem;
  line-height: 1;
  animation: preloader-pulse 1.4s ease-in-out infinite;
}

@keyframes preloader-pulse {
  0%, 100% { transform: scale(1);   opacity: 1;   }
  50%       { transform: scale(1.1); opacity: 0.7; }
}

.preloader-spinner {
  width: 40px;
  height: 40px;
  position: relative;
}

.preloader-ring {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: var(--accent, #d97706);
  border-right-color: var(--accent, #d97706);
  animation: preloader-spin 0.7s linear infinite;
}

@keyframes preloader-spin {
  to { transform: rotate(360deg); }
}

/* ══════════════════════════════════════════════════════════════════════════
   New role badge colours
   passenger → muted grey
   scout     → sky blue  (was viewer)
   wayfarer  → amber     (was editor)
   navigator → violet    (new)
   pathfinder→ green     (was owner)
   ══════════════════════════════════════════════════════════════════════════ */
.role-passenger  { background: rgba(120,113,108,0.18); color: #a8a29e; }
.role-scout      { background: rgba(14,165,233,0.15);  color: #38bdf8; }
.role-wayfarer   { background: rgba(217,119,6,0.15);   color: #fbbf24; }
.role-navigator  { background: rgba(124,58,237,0.18);  color: #a78bfa; }
.role-pathfinder { background: rgba(16,185,129,0.15);  color: #34d399; }
/* legacy aliases kept for any cached data */
.role-viewer  { background: rgba(14,165,233,0.15);  color: #38bdf8; }
.role-editor  { background: rgba(217,119,6,0.15);   color: #fbbf24; }
.role-owner   { background: rgba(16,185,129,0.15);  color: #34d399; }