:root {
  --mc-navy: #1e3a8a;
  --mc-blue: #2563eb;
  --mc-blue-hover: #1d4ed8;
  --mc-blue-soft: #eef2ff;
  --mc-blue-ring: #c7d2fe;
  --mc-page: #f5f5f5;
  --mc-card: #fff;
  --mc-line: #e7e9f2;
  --mc-text: #222;
  --mc-muted: #6b7280;
  --mc-radius-btn: 12px;
  --mc-radius-card: 14px;
  --mc-radius-pill: 999px;
  --mc-shadow-card: 0 8px 24px rgba(17, 24, 39, 0.06);
  --mc-shadow-nav: 0 6px 18px rgba(0, 0, 0, 0.05);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--mc-blue);
  outline-offset: 2px;
}

.mc-btn-primary {
  background: var(--mc-blue);
  color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: var(--mc-radius-btn);
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
}

.mc-btn-primary:hover {
  background: var(--mc-blue-hover);
}

.mc-btn-secondary {
  background: #fff;
  color: #111;
  border: 1px solid var(--mc-line);
  border-radius: var(--mc-radius-btn);
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
}

.mc-btn-secondary:hover {
  background: var(--mc-blue-soft);
}

.mc-card {
  background: var(--mc-card);
  border: 1px solid var(--mc-line);
  border-radius: var(--mc-radius-card);
  box-shadow: var(--mc-shadow-card);
}

.mc-selected {
  background: var(--mc-blue-soft);
  border-color: var(--mc-blue-ring);
  color: var(--mc-navy);
}