/*
 * HumanHUD base styles — shared foundation for every feature.
 *
 * Encodes the two hard platform constraints from the PRD:
 *   1. A fixed 600x600 viewport with no scrolling (PRD 5.1 / 8.2).
 *   2. An additive-display theme: black background (transparent on the
 *      glasses), bright high-contrast foreground (PRD 3.2 / 8.3).
 *
 * Feature-specific styling lives next to each feature (e.g.
 * features/hud/hud.css). This file only owns global theme tokens and the
 * screen-stacking scaffold the router depends on.
 */

:root {
  --hud-bg: #000;
  --hud-fg: #f5faff;
  --hud-muted: #7c8896;
  --hud-accent: #00d4ff;
  --hud-positive: #34e29b;
  --hud-negative: #ff6b6b;
  --hud-panel: #0c0f14;
  --hud-panel-border: rgba(255, 255, 255, 0.08);

  --hud-size: 600px;
  --hud-pad: 28px;

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui,
    sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: var(--hud-size);
  height: var(--hud-size);
  margin: 0;
  padding: 0;
  overflow: hidden; /* No scrollbars on the glasses (PRD 8.2). */
  background: var(--hud-bg);
  color: var(--hud-fg);
  -webkit-font-smoothing: antialiased;
}

#app {
  position: relative;
  width: var(--hud-size);
  height: var(--hud-size);
  overflow: hidden;
}

/*
 * Every screen fills the viewport. The screen-router shows exactly one at a
 * time by toggling the `hidden` attribute, so there is never any scrolling
 * between screens.
 */
.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: var(--hud-pad);
}

.screen[hidden] {
  display: none;
}

/* Phase 0 splash / wordmark, shown until real features are wired in. */
.splash {
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
}

.splash__wordmark {
  font-size: 56px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.splash__wordmark b {
  color: var(--hud-accent);
  font-weight: 700;
}

.splash__tag {
  font-size: 18px;
  color: var(--hud-muted);
}