/* MERGE-BLOCK: variables.css */
:root {
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-display: 'Plus Jakarta Sans', var(--font-sans);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --bg-app: #060a12;
  --bg-canvas: #0a1420;
  --bg-card: rgba(14, 22, 38, 0.82);
  --bg-card-hover: rgba(22, 34, 56, 0.9);
  --bg-input: rgba(8, 14, 26, 0.75);
  --border: rgba(255, 255, 255, 0.08);
  --border-active: rgba(99, 102, 241, 0.45);

  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;

  --accent: #6366f1;
  --accent-glow: rgba(99, 102, 241, 0.22);
  --accent-2: #00e5ff;
  --accent-2-glow: rgba(0, 229, 255, 0.18);
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;

  --nav-height: 52px;
  --hud-height: 56px;
  --controls-height: 120px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
  --transition: 0.2s ease;
}
/* END-MERGE-BLOCK */