:root {
  --color-primary: #2f6fed;
  --color-surface: #ffffff;
  --color-background: #f5f8fc;
  --color-text-primary: #1b2533;
  --color-text-muted: #5f6b7a;
  --color-success: #198754;
  --color-warning: #c58b00;
  --color-danger: #c3414f;
  --radius-card: 14px;
  --font-body: "Segoe UI", "Noto Sans", sans-serif;
  --font-heading: "Trebuchet MS", "Segoe UI", sans-serif;
}

body {
  background: radial-gradient(1200px 420px at 20% -30%, #e5efff, transparent), var(--color-background);
  color: var(--color-text-primary);
  font-family: var(--font-body);
}

h1, h2, h3, h4, h5, .navbar-brand {
  font-family: var(--font-heading);
}

.text-primary, .btn-link {
  color: var(--color-primary) !important;
}

.btn-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.card {
  border: 1px solid #e5eaf1;
  border-radius: var(--radius-card);
  box-shadow: 0 8px 20px rgba(20, 32, 70, 0.04);
}

.app-card {
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.app-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(20, 32, 70, 0.09);
}

.metric-chip {
  border-radius: 999px;
  font-size: 0.78rem;
  padding: 0.2rem 0.55rem;
  background: #eef3ff;
  color: #244393;
}

.section-title {
  letter-spacing: 0.02em;
  color: #2b3747;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-background: #10151d;
    --color-surface: #171e28;
    --color-text-primary: #ecf1f8;
    --color-text-muted: #b2bfd1;
  }

  body {
    background: radial-gradient(1200px 420px at 20% -30%, #1a2f53, transparent), var(--color-background);
  }

  .card, .navbar, footer {
    background: var(--color-surface) !important;
    border-color: #2c3646 !important;
  }

  .text-muted {
    color: var(--color-text-muted) !important;
  }
}