/* ============================================================
   THE BRIDGE — GLOBAL DESIGN TOKENS
   All colors, typography, and base styles live here.
   Do not hardcode any of these values elsewhere.
   ============================================================ */

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

:root {
  /* Backgrounds */
  --void:        #08080f;
  --deep:        #0f0f1a;
  --surface:     #16161f;
  --elevated:    #1e1e2a;
  --border:      #2a2a3a;

  /* Cream — all interactive and primary elements */
  --cream:       #f0ebe0;
  --cream-dim:   #b8b0a0;
  --cream-ghost: #5a5650;

  /* Signal — used sparingly, critical moments only */
  --signal:      #c8a96e;
  --signal-dim:  #7a6840;

  /* Damage — threats, hits, critical states */
  --damage:      #6b2a2a;
  --damage-dim:  #3a1a1a;

  /* Safe — clean counters, positive outcomes */
  --safe:        #2a4a3a;

  /* Transparency */
  --glass:       rgba(22, 22, 31, 0.85);
  --overlay:     rgba(8, 8, 15, 0.92);

  /* Typography */
  --font-ui:     'Space Grotesk', sans-serif;
  --font-data:   'Space Mono', monospace;

  /* Type scale */
  --text-xs:     0.6875rem;
  --text-sm:     0.8125rem;
  --text-base:   1rem;
  --text-lg:     1.375rem;

  /* Letter spacing */
  --tracking-ui:   0.06em;
  --tracking-data: 0.1em;

  /* Animation timing */
  --ease-quick:  cubic-bezier(0.2, 0, 0.4, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-drift:  cubic-bezier(0.6, 0, 0.8, 1);
}

/* Base reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

html, body {
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
  background: var(--void);
  color: var(--cream);
  font-family: var(--font-ui);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

/* Starfield canvas — always behind everything */
#starfield {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}