:root {
  --bg-0: #070b12;
  --bg-1: #0d1420;
  --bg-2: #111b2a;
  --card: rgba(18, 29, 44, 0.86);
  --card-border: rgba(104, 146, 198, 0.2);
  --text: #d8e8ff;
  --muted: #8ea7c7;
  --primary: #2f8cff;
  --accent: #02d6b5;
  --warning: #f7b84a;
  --critical: #ff5c7a;
  --shadow: 0 14px 24px rgba(0, 0, 0, 0.34);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background:
    radial-gradient(circle at 15% 0%, rgba(47, 140, 255, 0.12), transparent 35%),
    radial-gradient(circle at 85% 10%, rgba(2, 214, 181, 0.09), transparent 30%),
    linear-gradient(160deg, var(--bg-0), var(--bg-1) 38%, var(--bg-2));
  color: var(--text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

h1,
h2,
h3,
p {
  margin: 0;
}

.muted {
  color: var(--muted);
}

.card {
  background: linear-gradient(180deg, rgba(20, 33, 52, 0.82), rgba(14, 23, 37, 0.85));
  border: 1px solid var(--card-border);
  border-radius: 14px;
  box-shadow: var(--shadow);
}