@font-face {
  font-family: "Inter";
  src: url("/public/fonts/Inter-Variable.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --font-family-primary: "Inter";
  --color-primary: #051a37;
  --color-primary-hover: #0d2d57;
  --color-secondary: #ffb300;
  --color-secondary-soft: #fff3cc;
  --ink: #051a37;
  --brand: #051a37;
  --brand-dark: #0d2d57;
  --accent: #fff3cc;
}

html,
body,
body *,
body *::before,
body *::after {
  font-family: var(--font-family-primary);
  font-feature-settings: "liga" 1, "calt" 1;
}

body {
  font-size: 14px;
  font-weight: 400;
}

h1 { font-size: 28px; font-weight: 700; }
h2 { font-size: 20px; font-weight: 600; }
h3, .brand { font-size: 16px; font-weight: 600; }
nav a, .form label { font-weight: 500; }
button, .button { font-size: 14px; font-weight: 600; }
.form input, .form select, .form textarea, td { font-size: 14px; font-weight: 400; }
th { font-size: 13px; font-weight: 600; }
table, .stats strong { font-variant-numeric: tabular-nums; }
.stats strong { font-size: 28px; font-weight: 700; }

.sidebar { background: var(--color-primary); }
.brand img { width: 42px; height: 42px; object-fit: contain; flex: 0 0 auto; }
.sidebar .brand img { padding: 3px; border-radius: 10px; background: #fff; }
.brand.centered { flex-direction: column; gap: 8px; }
.brand.centered img { width: 104px; height: 104px; }
nav a:hover { color: var(--color-primary); background: var(--color-secondary); }
.environment { color: var(--color-primary); border-color: var(--color-secondary); }
.form input:focus, .form textarea:focus, .form select:focus {
  outline-color: var(--color-secondary);
  border-color: var(--color-primary);
}
.progress span { background: var(--color-secondary); }
.auth-page {
  background: radial-gradient(circle at top, var(--color-secondary-soft), #f7f8fa 48%);
}