/* Cosmic Cadets — Design Tokens (Direction B)
   Vanilla-web source of truth. Reference these vars everywhere; never hard-code.
   Fonts: load Baloo 2 (400,500,600,700) + Nunito (400,600,700,800).
   This is a DARK theme on deep space. */

:root {
  /* ── Neon accents ────────────────────────────────────────── */
  --color-cyan: #3DE0E0;     /* primary action, Nova the AI buddy, "done" */
  --color-pink: #FF5CCB;     /* current/active level, energy */
  --color-lime: #B6F25C;     /* stars, XP, positive stats */
  --color-orange: #FF9F45;   /* streaks, boss levels */
  --color-violet: #8C7CFF;   /* locked path, secondary accent */

  /* ── Deep-space surfaces ─────────────────────────────────── */
  --color-space-top: #1B1448;
  --color-space-bot: #0C0824;
  --color-card-solid: #251B58;
  --color-card: rgba(255, 255, 255, 0.07);   /* glassy card on space */
  --color-line: rgba(255, 255, 255, 0.12);   /* glassy borders */
  --color-ink: #FFFFFF;                        /* primary text */
  --color-muted: #A99FD6;                      /* secondary text / labels */

  /* App background is a radial gradient, not a flat fill: */
  --bg-space: radial-gradient(120% 80% at 20% 0%, #2A1E6B 0%, #1B1448 38%, #0C0824 100%);

  /* ── Typography ──────────────────────────────────────────── */
  --font-display: "Baloo 2", system-ui, sans-serif; /* headings, missions, numbers */
  --font-body: "Nunito", system-ui, sans-serif;

  --weight-body: 600;
  --weight-body-bold: 700;
  --weight-body-x: 800;
  --weight-display: 700;  /* Baloo 2 Bold */

  --text-display: 40px;   /* "Cosmic Cadets" / "Mission ready" */
  --text-h1: 27px;        /* "Cadet Maya", mission title */
  --text-h2: 21px;
  --text-lg: 19px;        /* primary button */
  --text-body: 15px;
  --text-sm: 14px;
  --text-label: 13px;     /* UPPERCASE eyebrow (track 1px), muted */
  --leading-tight: 1.05;
  --leading-body: 1.35;

  /* ── Radius ──────────────────────────────────────────────── */
  --radius-pill: 999px;
  --radius-lg: 20px;      /* cards, badge tiles */
  --radius-md: 18px;      /* image cards */
  --radius-sm: 14px;
  --radius-bubble: 6px 16px 16px 16px; /* buddy speech bubble */

  /* ── Spacing scale ───────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --screen-pad: 22px;

  /* ── Elevation = NEON GLOW (colored, blurred) ────────────── */
  /* Glows are the signature. Use the matching accent at ~55–66% alpha. */
  --glow-cyan: 0 0 24px rgba(61, 224, 224, 0.55);
  --glow-pink: 0 0 28px rgba(255, 92, 203, 0.6);
  --glow-lime: 0 0 16px rgba(182, 242, 92, 0.5);
  --glow-orange: 0 0 22px rgba(255, 159, 69, 0.5);
  --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.35); /* subtle depth on dark */

  /* ── Motion ──────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1);
  --dur-tap: 120ms;
  --dur-enter: 300ms;
}

/* Example — primary "launch" button
.btn-launch {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-lg);
  color: #06222A;                 // dark text on bright cyan for contrast
  background: var(--color-cyan);
  border-radius: var(--radius-pill);
  padding: 16px 0;
  box-shadow: var(--glow-cyan);
}
// "done" planet node:
.node-done { background: var(--color-cyan); box-shadow: 0 0 20px rgba(61,224,224,0.53); }
*/