/* ==========================================================================
   NETSCOPE — DESIGN TOKENS
   Everything visual starts here. The palette is taken from the app icon:
   deep navy, electric cyan, a pale ice for the "inner" nodes.
   Fonts: Sora (headings and body) and JetBrains Mono (terminal, keys, data).
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ---- Colour ---------------------------------------------------------- */
  --bg:          #040d19;   /* page bottom — the icon's darkest corner */
  --bg-2:        #071a2d;   /* raised panels */
  --bg-3:        #0b2440;   /* hover / active surface */
  --ink:         #02070f;   /* inside terminals */

  --line:        rgb(170 215 255 / 0.10);
  --line-strong: rgb(170 215 255 / 0.22);

  --text:        #e9f3fb;
  --text-muted:  #94adc4;
  --text-dim:    #5d7891;

  --cyan:        #16d5ff;   /* the endpoint node */
  --cyan-hi:     #9af2ff;
  --blue:        #0789ed;   /* the node's deep core */
  --blue-lo:     #0965df;
  --ice:         #d3edff;   /* inner nodes */
  --on-cyan:     #02131f;

  --up:          #4ade80;   /* terminal: interface up */
  --down:        #ff6b5e;   /* terminal: down / error */
  --warn:        #ffb454;   /* terminal: administratively down, warnings */
  --ip:          #c4a7ff;   /* terminal: IP addresses */

  --grad-cyan:   linear-gradient(120deg, var(--cyan-hi) 0%, var(--cyan) 45%, var(--blue) 100%);
  --grad-text:   linear-gradient(100deg, #14d5fb 0%, #079de9 60%, #0965df 100%);

  --glow-cyan:   0 0 0 1px rgb(22 213 255 / 0.35), 0 18px 60px -16px rgb(22 213 255 / 0.55);
  --shadow-win:  0 40px 90px -30px rgb(0 0 0 / 0.9), 0 0 0 1px rgb(170 215 255 / 0.12);

  /* ---- Glass ------------------------------------------------------------ */
  --glass:       linear-gradient(150deg, rgb(120 180 240 / 0.09) 0%, rgb(120 180 240 / 0.03) 60%, rgb(120 180 240 / 0.06) 100%);
  --glass-line:  rgb(170 215 255 / 0.14);
  --glass-top:   rgb(210 240 255 / 0.28);
  --glass-blur:  18px;

  /* ---- Type ------------------------------------------------------------- */
  --font:        'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:        'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-hero:     clamp(2.6rem, 6.2vw, 5.2rem);
  --fs-h2:       clamp(1.85rem, 3.6vw, 3rem);
  --fs-h3:       clamp(1.2rem, 1.6vw, 1.45rem);
  --fs-lead:     clamp(1.05rem, 1.4vw, 1.25rem);
  --fs-body:     1rem;
  --fs-small:    0.875rem;
  --fs-mono:     0.8125rem;

  /* ---- Layout ----------------------------------------------------------- */
  --max:         1180px;
  --gutter:      clamp(16px, 4vw, 40px);
  --section:     clamp(5rem, 11vw, 9rem);
  --radius:      14px;
  --radius-lg:   22px;
  --radius-sm:   8px;

  /* ---- Motion ----------------------------------------------------------- */
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --dur:         .35s;
  --dur-slow:    .9s;
}