:root {
  --rms-ink: #070B14;
  --rms-panel: #0E1524;
  --rms-elevated: #152036;
  --rms-line: #1C2A44;
  --rms-blue: #2563EB;
  --rms-cyan: #22D3EE;
  --rms-gold: #F59E0B;
  --bg-canvas: var(--rms-ink);
  --bg-surface: var(--rms-panel);
  --bg-elevated: var(--rms-elevated);
  --bg-hover: rgba(34, 211, 238, 0.06);
  --text-primary: #F8FAFC;
  --text-muted: #94A3B8;
  --text-subtle: #64748B;
  --border-default: var(--rms-line);
  --border-strong: #2A3C5C;
  --font-sans: "Instrument Sans", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "SF Mono", Consolas, monospace;
  --shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.35);
  --ring-focus: 0 0 0 3px rgba(34, 211, 238, 0.28);
  --radius-md: 10px;
  --radius-lg: 16px;
}

.light {
  --bg-canvas: #F4F7FB;
  --bg-surface: #FFFFFF;
  --bg-elevated: #EEF3FA;
  --bg-hover: rgba(37, 99, 235, 0.06);
  --text-primary: #0F172A;
  --text-muted: #475569;
  --text-subtle: #94A3B8;
  --border-default: #D7E0EE;
  --border-strong: #C5D0E2;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  background: var(--bg-canvas);
  color: var(--text-primary);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; }

pre, code { font-family: var(--font-mono); }

.preview-iframe {
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
}

input:focus, select:focus, textarea:focus, button:focus-visible {
  outline: none;
  border-color: var(--rms-cyan) !important;
  box-shadow: var(--ring-focus) !important;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: fadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.35); }
  50% { box-shadow: 0 0 0 8px rgba(34, 211, 238, 0); }
}
.pulse-glow { animation: pulseGlow 2.2s infinite; }

.rms-grid {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(34, 211, 238, 0.08) 1px, transparent 0);
  background-size: 24px 24px;
}

.rms-hero-glow {
  background:
    radial-gradient(1200px 400px at 15% -10%, rgba(37, 99, 235, 0.22), transparent 55%),
    radial-gradient(900px 360px at 90% 0%, rgba(34, 211, 238, 0.12), transparent 50%);
}