:root {
  --education-blue-700: #1d4ed8;
  --education-blue-500: #3b82f6;
  --education-ink: #172033;
  --education-muted: #64748b;
  --education-border: #dbe3ee;
  --education-canvas: #f8fafc;
}

html,
body {
  color: var(--education-ink);
  background: var(--education-canvas);
}

.mantine-AppShell-header,
header[data-with-border] {
  border-bottom-color: rgb(255 255 255 / 20%);
  color: #ffffff;
  background-color: var(--education-blue-700);
  background-image: linear-gradient(135deg, var(--education-blue-700), var(--education-blue-500));
}

.mantine-AppShell-header a,
.mantine-AppShell-header button,
header[data-with-border] a,
header[data-with-border] button {
  color: inherit;
}

button,
[role="button"],
input,
textarea,
select {
  letter-spacing: 0;
}

button,
[data-variant="filled"] {
  border-radius: 6px;
}

input:focus,
textarea:focus,
select:focus {
  outline-color: rgb(59 130 246 / 30%);
}