:root {
  --bg: #0f131a;
  --surface: #1a2230;
  --surface-2: #111a26;
  --fg: #f3f6fa;
  --muted: #a7b3c5;
  --line: #2a3649;

  --status-darkgreen: #14532d;
  --status-green: #166534;
  --status-yellow: #854d0e;
  --status-red: #991b1b;
  --status-darkred: #5f0f16;

  --btn-primary: #1e40af;
  --btn-primary-hover: #1d4ed8;
  --btn-danger: #b91c1c;
  --btn-danger-hover: #dc2626;
  --focus-ring: #f59e0b;
  --focus-ring-shadow: rgba(245, 158, 11, 0.38);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: radial-gradient(circle at 20% -20%, #1f2b42 0%, var(--bg) 55%);
  color: var(--fg);
  font-family: "Segoe UI", "Noto Sans", Arial, sans-serif;
}

body {
  min-height: 100vh;
  -webkit-tap-highlight-color: rgba(245, 158, 11, 0.25);
}

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

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

input,
select,
button {
  font: inherit;
}

a,
button,
input,
select {
  touch-action: manipulation;
}

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--focus-ring-shadow);
}

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