/*
 * base.css
 * CSS custom properties, reset, body, ambient orb decorations, and
 * typography utility classes.
 * Imported first — establishes the design system tokens used by all other sheets.
 */

/* ─── Design Tokens ──────────────────────────────────────────────────────── */

:root {
  /* Colours */
  --bg:       #07111f;
  --card:     rgba(16, 28, 48, 0.78);
  --line:     rgba(255, 255, 255, 0.08);
  --text:     #e8eefc;
  --muted:    #93a0bb;
  --accent:   #5eead4;
  --accent-2: #818cf8;
  --danger:   #fb7185;

  /* Effects */
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

/* ─── Reset ──────────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ─── Body ───────────────────────────────────────────────────────────────── */

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Segoe UI", system-ui, sans-serif;
  background: radial-gradient(circle at top, #12213a 0%, var(--bg) 42%);
  color: var(--text);
}

/* ─── Ambient Orb Decorations ────────────────────────────────────────────── */
/* Purely decorative blurred blobs rendered behind all content. */

.orb {
  position: fixed;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
}

.orb-a { background: #164e63; top: -80px;  left: -60px;    }
.orb-b { background: #312e81; right: -80px; bottom: 10%;   }

/* ─── Typography Utilities ───────────────────────────────────────────────── */

.sub,
.muted,
.lede,
.status,
.empty,
.eyebrow {
  color: var(--muted);
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 11px;
  margin: 0 0 10px;
}

/* ─── Visibility Utilities ───────────────────────────────────────────────── */

.hidden { display: none !important; }
.empty  { font-size: 13px; }