/* ============================================================================
   themes.css — Design tokens (CSS custom properties)
   ----------------------------------------------------------------------------
   Single source of truth for colours, glass, blur, radii, spacing & timing.
   Brand colours are the EXACT values from the reference spec.
   ========================================================================== */

:root {
  /* ---- Surface / background ---- */
  --bg-0: #050814;
  --bg-1: #070b18;
  --bg-2: #0a0f20;

  /* ---- Glass ---- */
  --glass-bg: rgba(255, 255, 255, 0.04);
  --glass-bg-strong: rgba(255, 255, 255, 0.07);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-border-strong: rgba(255, 255, 255, 0.2);
  --glass-blur: 16px;
  --glass-blur-strong: 28px;

  /* ---- Text ---- */
  --text-1: #f5f5f5; /* White */
  --text-2: #b7c0d0; /* Secondary */
  --text-3: rgba(183, 192, 208, 0.55);

  /* ---- Brand colours (exact) + rgb triples for glow ---- */
  --green: #3bff9c;
  --green-rgb: 59, 255, 156;
  --purple: #9a4dff;
  --purple-rgb: 154, 77, 255;
  --pink: #ff3e9d;
  --pink-rgb: 255, 62, 157;
  --blue: #33c6ff;
  --blue-rgb: 51, 198, 255;
  --gold: #f4b942;
  --gold-rgb: 244, 185, 66;
  /* cyan kept as an alias of blue so any legacy reference stays on-palette */
  --cyan: #33c6ff;
  --cyan-rgb: 51, 198, 255;
  --orange: #ff8a3d;
  --orange-rgb: 255, 138, 61;

  /* ---- Connection line base colour ---- */
  --line: rgba(170, 190, 230, 0.22);
  --line-rgb: 170, 190, 230;

  /* ---- Radii ---- */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* ---- Spacing scale ---- */
  --sp-1: 6px;
  --sp-2: 10px;
  --sp-3: 16px;
  --sp-4: 24px;
  --sp-5: 36px;
  --sp-6: 54px;

  /* ---- Elevation ---- */
  --shadow-1: 0 10px 30px rgba(0, 0, 0, 0.5);
  --shadow-2: 0 24px 60px rgba(0, 0, 0, 0.6);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --focus-ms: 350ms; /* spec: focus-mode transition */

  /* ---- Layout ---- */
  --docs-w: 340px;
  --z-bg: 0;
  --z-lines: 1;
  --z-node: 2;
  --z-focus: 30;
  --z-panel: 40;
  --z-popup: 1000;
}

/* ----------------------------------------------------------------------------
   Per-node colour classes: each sets --node (solid) and --node-rgb (glow).
   Everything (border, glow, accent) derives from these two variables.
   -------------------------------------------------------------------------- */
.c-green {
  --node: var(--green);
  --node-rgb: var(--green-rgb);
}
.c-purple {
  --node: var(--purple);
  --node-rgb: var(--purple-rgb);
}
.c-pink {
  --node: var(--pink);
  --node-rgb: var(--pink-rgb);
}
.c-blue {
  --node: var(--blue);
  --node-rgb: var(--blue-rgb);
}
.c-gold {
  --node: var(--gold);
  --node-rgb: var(--gold-rgb);
}
.c-cyan {
  --node: var(--cyan);
  --node-rgb: var(--cyan-rgb);
}
.c-orange {
  --node: var(--orange);
  --node-rgb: var(--orange-rgb);
}