/* ============================================================
   HIGHWAY MASTERCLASS ACADEMY — DESIGN TOKENS
   Theme: "Night Operations Center" — the visual language of a
   network operations center at 2am: dark glass panels, amber/
   cyan status lighting, monospace telemetry, and the particular
   green-on-black of a real terminal. Nothing decorative — every
   color here maps to a real signal (up/down/warning/info).
   ============================================================ */

:root {
  /* ---- Core surfaces ---- */
  --bg-void:        #0a0d12;   /* deepest background */
  --bg-base:        #10141b;   /* app background */
  --bg-panel:       #161b24;   /* card / panel surface */
  --bg-panel-raised:#1c222d;   /* hovered / active panel */
  --bg-inset:       #0d1117;   /* terminal / code wells */
  --bg-overlay:     rgba(10, 13, 18, 0.86);

  --border-subtle:  #232a36;
  --border-default: #2d3644;
  --border-strong:  #3c4759;

  /* ---- Text ---- */
  --text-primary:   #e8ecf1;
  --text-secondary: #a8b3c4;
  --text-muted:     #6b7688;
  --text-disabled:  #454e5f;

  /* ---- Signal colors (status lighting, not decoration) ---- */
  --signal-up:      #3ddc84;   /* interface up / success / correct */
  --signal-up-dim:  #1f5c3c;
  --signal-down:    #ff5c5c;   /* interface down / error / wrong */
  --signal-down-dim:#5c2626;
  --signal-warn:    #ffb454;   /* warning / partial credit */
  --signal-warn-dim:#5c4420;
  --signal-info:    #4fc3f7;   /* informational / active link */
  --signal-info-dim:#1e3f4c;

  /* ---- Domain accent colors (one per academy, used sparingly) ---- */
  --accent-sql:     #6bcf7f;   /* query-result green */
  --accent-git:     #f4845f;   /* commit-graph orange */
  --accent-linux:   #ffd166;   /* terminal amber */
  --accent-ccna:    #4fc3f7;   /* fiber-optic cyan */
  --accent-primary: #7c9eff;   /* brand / navigation accent */
  --accent-primary-dim: #26305c;

  /* ---- Typography ---- */
  --font-display: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --font-body:     'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-mono:     'IBM Plex Mono', 'Cascadia Code', 'Consolas', monospace;

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.375rem;
  --fs-xl:   1.75rem;
  --fs-2xl:  2.25rem;
  --fs-3xl:  3rem;

  --lh-tight: 1.2;
  --lh-normal: 1.55;

  /* ---- Spacing scale ---- */
  --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;

  /* ---- Radius & elevation ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  --shadow-panel: 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.35);
  --shadow-raised: 0 2px 8px rgba(0,0,0,0.5), 0 16px 40px rgba(0,0,0,0.4);
  --shadow-glow-up: 0 0 0 1px rgba(61,220,132,0.25), 0 0 20px rgba(61,220,132,0.15);
  --shadow-glow-down: 0 0 0 1px rgba(255,92,92,0.25), 0 0 20px rgba(255,92,92,0.15);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;

  /* ---- Layout ---- */
  --sidebar-width: 248px;
  --sidebar-collapsed: 64px;
  --topbar-height: 60px;
  --content-max: 1240px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}