/* ===========================================================================
   Nebula — Color tokens
   Dark theme, light-blue neon accent. Base scale + semantic aliases.
   =========================================================================== */
:root {
  /* --- Base: deep space backgrounds (cool, slightly blue near-black) --- */
  --nb-bg-900: #04060c;   /* deepest — page void */
  --nb-bg-800: #070b14;   /* app shell */
  --nb-bg-700: #0b1120;   /* raised panel base */
  --nb-bg-600: #101a2e;   /* card / surface */
  --nb-bg-500: #16233d;   /* hover surface */

  /* --- Neon: light-blue accent ramp --- */
  --nb-neon-300: #aef0ff; /* brightest highlight */
  --nb-neon-200: #6ee7ff; /* primary glow */
  --nb-neon-100: #38bdf8; /* primary accent */
  --nb-neon-000: #1f9cf0; /* accent pressed */
  --nb-neon-deep: #1366c4;/* deep blue edge */

  /* --- Ink / text on dark --- */
  --nb-ink-100: #eef5ff;  /* primary text */
  --nb-ink-200: #b6c6e2;  /* secondary text */
  --nb-ink-300: #7c8db0;  /* muted / labels */
  --nb-ink-400: #4d5d7d;  /* disabled / faint */

  /* --- Lines & strokes --- */
  --nb-line-soft: rgba(120, 180, 255, 0.08);
  --nb-line: rgba(120, 180, 255, 0.14);
  --nb-line-strong: rgba(120, 180, 255, 0.28);
  --nb-line-neon: rgba(110, 231, 255, 0.55);

  /* --- Semantic status --- */
  --nb-success: #34e2b4;
  --nb-warning: #ffcc66;
  --nb-danger: #ff5d7a;
  --nb-danger-deep: #c0203f;

  /* ===== Semantic aliases (use these in components) ===== */
  --surface-app: var(--nb-bg-800);
  --surface-panel: var(--nb-bg-700);
  --surface-card: var(--nb-bg-600);
  --surface-hover: var(--nb-bg-500);

  --text-strong: var(--nb-ink-100);
  --text-body: var(--nb-ink-200);
  --text-muted: var(--nb-ink-300);
  --text-faint: var(--nb-ink-400);

  --accent: var(--nb-neon-100);
  --accent-bright: var(--nb-neon-200);
  --accent-pressed: var(--nb-neon-000);
  --on-accent: #02101f;

  --border: var(--nb-line);
  --border-strong: var(--nb-line-strong);

  /* Signature gradients */
  --grad-app: radial-gradient(1200px 700px at 18% -10%, rgba(31, 156, 240, 0.16), transparent 60%),
              radial-gradient(900px 600px at 92% 8%, rgba(110, 231, 255, 0.10), transparent 55%),
              linear-gradient(160deg, #0a1326 0%, #05070f 55%, #04060c 100%); /* @kind color */
  --grad-app-fallback: linear-gradient(160deg, #0a1326 0%, #05070f 55%, #04060c 100%); /* @kind color */
  --grad-neon: linear-gradient(135deg, var(--nb-neon-200) 0%, var(--nb-neon-100) 45%, var(--nb-neon-deep) 100%); /* @kind color */
  --grad-card: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.012) 100%); /* @kind color */
}