/* ============================================================
   network.mikeshelby.com — Design Tokens
   Identity: "Network Operations Console"
   A NOC dashboard / terminal aesthetic. Deep slate canvas,
   monospace for technical data, geometric sans for reading,
   a single signal-cyan accent with status colors for mastery.
   ============================================================ */

:root {
  /* ---- Color: canvas & surface ---- */
  --bg:            #0c1118;   /* deep slate, the NOC dark */
  --surface:       #131a24;   /* panel background */
  --surface-2:     #1a2430;   /* raised panel / hover */
  --surface-3:     #222e3d;   /* input fields, wells */
  --line:          #2a3645;   /* hairline borders */
  --line-bright:   #3a4a5e;   /* emphasized borders */

  /* ---- Color: text ---- */
  --ink:           #e8eef5;   /* primary text */
  --ink-dim:       #9fb0c3;   /* secondary text */
  --ink-faint:     #647689;   /* captions, metadata */

  /* ---- Color: signal accent ---- */
  --signal:        #2ee6c8;   /* cyan — the connection/signal color */
  --signal-dim:    #1f9d8a;
  --signal-glow:   rgba(46, 230, 200, 0.18);

  /* ---- Color: status (mastery + domains) ---- */
  --status-locked:  #647689;  /* not started */
  --status-learn:   #f5b542;  /* in progress — amber */
  --status-strong:  #3ddc84;  /* mastered — green */
  --status-weak:    #ff6b6b;  /* needs review — red */

  /* domain hues — each of the 5 domains gets an identity */
  --d1: #2ee6c8;   /* Concepts      — cyan   */
  --d2: #5b9dff;   /* Implementation— blue   */
  --d3: #b48bff;   /* Operations    — violet */
  --d4: #ff8b5b;   /* Security      — orange */
  --d5: #ff6b9d;   /* Troubleshoot  — pink   */

  /* ---- Type ---- */
  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", ui-monospace, monospace;

  /* type scale (1.25 ratio) */
  --t-xs:   0.75rem;
  --t-sm:   0.875rem;
  --t-base: 1rem;
  --t-md:   1.125rem;
  --t-lg:   1.375rem;
  --t-xl:   1.75rem;
  --t-2xl:  2.25rem;
  --t-3xl:  3rem;

  /* ---- Spacing ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;

  /* ---- Geometry ---- */
  --radius:    6px;
  --radius-lg: 10px;
  --radius-sm: 3px;

  /* ---- Depth ---- */
  --shadow:    0 4px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.55);

  /* ---- Layout ---- */
  --maxw:    1200px;
  --maxw-read: 760px;  /* comfortable reading measure for lessons */
  --header-h: 64px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}