/* WTK KSP Multiplayer — Design Token System
   Mission Control: industrial retro-futuristic terminal aesthetic
   ─────────────────────────────────────────────────────────────── */

:root {
  /* ── Palette ─────────────────────────────────────────────── */
  --void:          #0A0E14;
  --panel:         #141A24;
  --panel-raised:  #1C2333;
  --panel-edge:    #232C3A;
  --panel-edge-hi: #2F3E52;

  --text:          #E6EDF3;
  --text-muted:    #7D8590;
  --text-dim:      #404B5A;

  --go:            #39FF6A;
  --go-dim:        rgba(57, 255, 106, 0.12);
  --go-glow:       rgba(57, 255, 106, 0.35);

  --caution:       #FFB627;
  --caution-dim:   rgba(255, 182, 39, 0.12);
  --caution-glow:  rgba(255, 182, 39, 0.35);

  --nogo:          #FF4D4D;
  --nogo-dim:      rgba(255, 77, 77, 0.12);
  --nogo-glow:     rgba(255, 77, 77, 0.35);

  --accent:        #5AC8FA;
  --accent-dim:    rgba(90, 200, 250, 0.10);

  /* ── Typography ─────────────────────────────────────────── */
  --font-mono: 'Space Mono', 'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ── Type scale ─────────────────────────────────────────── */
  --sz-10:   0.625rem;
  --sz-11:   0.6875rem;
  --sz-12:   0.75rem;
  --sz-13:   0.8125rem;
  --sz-14:   0.875rem;
  --sz-16:   1rem;
  --sz-18:   1.125rem;
  --sz-20:   1.25rem;
  --sz-24:   1.5rem;
  --sz-28:   1.75rem;
  --sz-32:   2rem;
  --sz-40:   2.5rem;
  --sz-hero: clamp(2.75rem, 7.5vw, 5.5rem);

  /* ── Spacing ─────────────────────────────────────────────── */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  /* ── Layout ──────────────────────────────────────────────── */
  --max-w: 1200px;
  --nav-h: 40px;

  /* ── Panel corner ticks ──────────────────────────────────── */
  --tick:       12px;   /* arm length */
  --tick-w:     2px;    /* line thickness */
  --tick-color: var(--accent);

  /* ── Animation ───────────────────────────────────────────── */
  --dur-fast: 100ms;
  --dur-base: 220ms;
  --dur-slow: 480ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}