/* ============================================================================
   tokens.css — Moon design system (dark, neon, modern)
   Single theme. No toggle. Apply by linking this file from any page.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* ---------- Surfaces ---------- */
  --bg:        #08090F;
  --bg-2:      #0C0E18;
  --panel:     #11131D;
  --panel-2:   #161924;
  --line:      rgba(255,255,255,0.08);
  --line-soft: rgba(255,255,255,0.05);

  /* ---------- Foreground (text) ---------- */
  --fg:        #ECEEF7;
  --fg-mute:   #8B92A8;
  --fg-faint:  #5A607A;

  /* ---------- Brand accents ---------- */
  --neon:         #00FFA0;
  --neon-soft:    #6BFFC8;
  --violet:       #9B59FF;
  --violet-light: #C8A8FF;
  --magenta:      #FF4894;
  --amber:        #FFB52E;

  /* ---------- Semantic colors ---------- */
  --c-pos: var(--neon);     /* gains */
  --c-neg: var(--magenta);  /* losses */
  --c-warn: var(--amber);

  /* ---------- Borders + radius ---------- */
  --bd-card: 1px solid var(--line);
  --bd-soft: 1px solid var(--line-soft);
  --r-card: 18px;
  --r-block: 12px;
  --r-input: 10px;
  --r-pill: 999px;

  /* ---------- Shadows (subtle, dark) ---------- */
  --sh-panel:  0 1px 0 rgba(255,255,255,0.04) inset;
  --sh-glow-neon:   0 0 0 1px rgba(0,255,160,0.20), 0 24px 60px -20px rgba(0,255,160,0.25);
  --sh-glow-violet: 0 0 0 1px rgba(155,89,255,0.20), 0 24px 60px -20px rgba(155,89,255,0.25);
  --sh-lift:   0 10px 30px rgba(0,0,0,0.45);

  /* ---------- Type scale ---------- */
  --fs-display: clamp(56px, 8vw, 120px);
  --fs-h1: clamp(40px, 5vw, 64px);
  --fs-h2: 24px;
  --fs-h3: 18px;
  --fs-body: 14px;
  --fs-small: 13px;
  --fs-eyebrow: 11px;
  --fs-mono-xl: 30px;

  /* ---------- Layout ---------- */
  --content-max: 1280px;
  --gutter: 28px;
  --stack-gap: 24px;
  --card-pad: 24px;
  --card-pad-sm: 18px;

  /* ---------- Fonts ---------- */
  --font-body: 'Geist', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100%; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--fg);
  /* Faint mesh-gradient ambient — neon top-right, violet bottom-left.
     This is what gives Moon its "deep space with city lights" feel. */
  background-image:
    radial-gradient(1200px 600px at 90% -10%, rgba(155,89,255,0.10) 0%, transparent 60%),
    radial-gradient(900px 500px at -10% 120%, rgba(0,255,160,0.08) 0%, transparent 55%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Typographic utilities ---------- */
.num, .mono {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1, "ss02" 1, "zero" 1;
  font-variant-numeric: tabular-nums;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--fg-mute);
}

a { color: inherit; }
::selection { background: var(--neon); color: #000; }

/* ---------- Marquee animation (used by ticker tape on the masthead) ---------- */
@keyframes gsr-tape { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.gsr-tape { animation: gsr-tape 60s linear infinite; }