/* ============================================================
   ds.css — 1ShotGen "deep-space" design system.
   Re-skins the app/account/auth pages by remapping the existing
   styles.css custom properties to the landing's palette, adding the
   deep-space backdrop + display font. Loaded AFTER styles.css so it
   overrides. Markup/JS hooks are untouched — this is pure re-skin.
   Pair with /fonts-landing.css (Space Grotesk · Inter · JetBrains Mono).
   ============================================================ */
:root{
  /* deep-space palette (ported from the landing) */
  --bg-0:#06060f; --bg-1:#0b0a1f; --bg-2:#100e26;
  --indigo:#6d5dfc; --cyan:#3ad6ff; --magenta:#ff48d0;
  --ink:#eef0ff; --muted:#9aa0c7; --faint:#8186b3;
  --line-lum:rgba(120,140,255,.35);
  --glass:rgba(20,20,46,.5);
  --glass-line:rgba(150,160,240,.16);
  --ease:cubic-bezier(.16,1,.3,1);
  --font-display:"Space Grotesk", system-ui, sans-serif;

  /* ---- remap the EXISTING styles.css tokens to deep-space ---- */
  --accent:#6d5dfc;
  --accent-glow:0 0 28px -4px rgba(109,93,252,.55);
  --text:#eef0ff;
  --text-dim:#9aa0c7;
  --text-faint:#8186b3;
  --line:rgba(255,255,255,.09);
  --line-strong:rgba(120,140,255,.26);
  --danger:#ff6b6b;
  --radius:16px;
  --radius-lg:22px;
}

/* ---- deep-space backdrop ----
   auth/account pages keep their animated site-bg.js mesh (body stays
   transparent). The app shell has no mesh, so give it the gradient directly. */
html{ background:var(--bg-0); }
body{ color:var(--ink); }
body.app-shell{
  background:
    radial-gradient(120% 90% at 12% -8%, #170c36 0%, transparent 52%),
    radial-gradient(120% 100% at 108% 6%, #07203a 0%, transparent 48%),
    var(--bg-0) !important;
}

/* ---- typography: display headings in Space Grotesk ---- */
h1,h2,h3{ font-family:var(--font-display); letter-spacing:-.02em; }
::selection{ background:color-mix(in srgb, var(--indigo) 40%, transparent); color:#fff; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:8px; }

/* ---- subtle scrollbars on the dark theme ---- */
*{ scrollbar-color:var(--line-lum) transparent; }
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background:var(--line-lum); border-radius:999px; border:2px solid var(--bg-0); }
*::-webkit-scrollbar-track{ background:transparent; }

/* ---- retune the auth/account mesh orbs to deep-space (kill the green) ---- */
.orb--a{ background:radial-gradient(circle at 40% 40%, rgba(109,93,252,.78), transparent 66%) !important; }
.orb--b{ background:radial-gradient(circle at 50% 50%, rgba(58,214,255,.58), transparent 64%) !important; }
.orb--c{ background:radial-gradient(circle at 50% 50%, rgba(255,72,208,.50), transparent 66%) !important; }
.orb--d{ background:radial-gradient(circle at 50% 50%, rgba(124,92,255,.42), transparent 66%) !important; }