/**
 * HUD tokens contract for DXFI UAT surfaces.
 * Source inspiration: DiamondX terminal/HUD treatment.
 *
 * Mobile matrix:
 * - portrait-compact: max-width 480px and portrait
 * - portrait-micro: max-width 360px and portrait
 * - touch targets: md/lg buttons keep >= 44px min height
 */

:root {
  /* Brand */
  --hud-cyan: #1fddfe;
  --hud-emerald: #10b981;
  --hud-gold: #f4b73e;

  /* Surfaces (dark first) */
  --hud-bg-1: #0b2f53;
  --hud-bg-2: #0a2240;
  --hud-bg-3: #0b0b10;
  --hud-surface: rgba(255, 255, 255, 0.03);
  --hud-surface-elev: rgba(255, 255, 255, 0.06);

  /* Text and lines */
  --hud-text: #ffffff;
  --hud-text-dim: rgba(255, 255, 255, 0.72);
  --hud-line: rgba(255, 255, 255, 0.14);

  /* Glass */
  --hud-panel-top: rgba(255, 255, 255, 0.08);
  --hud-panel-bot: rgba(255, 255, 255, 0.03);

  /* Radius */
  --hud-radius-sm: 8px;
  --hud-radius-md: 12px;
  --hud-radius-lg: 16px;
  --hud-radius-pill: 999px;

  /* Motion */
  --hud-motion-fast: 150ms ease;
  --hud-motion-base: 220ms ease;

  /* Shadows */
  --hud-shadow-1: 0 10px 30px rgba(0, 0, 0, 0.3);
  --hud-shadow-2: 0 20px 50px rgba(0, 0, 0, 0.45);
  --hud-shadow-cyan: 0 10px 26px rgba(31, 221, 254, 0.24);
  --hud-shadow-emerald: 0 10px 26px rgba(16, 185, 129, 0.24);
  --hud-shadow-gold: 0 10px 26px rgba(244, 183, 62, 0.24);

  /* Typography */
  --hud-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Back-compat aliases for existing pages */
  --dx-cyan: var(--hud-cyan);
  --dx-emerald: var(--hud-emerald);
  --dx-gold: var(--hud-gold);
  --line: var(--hud-line);
  --text: var(--hud-text);
  --text-dim: var(--hud-text-dim);
  --bg1: var(--hud-bg-1);
  --bg2: var(--hud-bg-2);
  --bg3: var(--hud-bg-3);
}

html.light {
  --hud-text: #0a1220;
  --hud-text-dim: rgba(10, 18, 32, 0.72);
  --hud-line: rgba(10, 18, 32, 0.2);
  --hud-surface: rgba(2, 20, 40, 0.03);
  --hud-surface-elev: rgba(2, 20, 40, 0.06);
  --hud-panel-top: #ffffff;
  --hud-panel-bot: #f8fbff;
  --hud-shadow-1: 0 8px 22px rgba(0, 0, 0, 0.12);
  --hud-shadow-2: 0 14px 36px rgba(0, 0, 0, 0.18);
}

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