:root {
  --bg: #f4f7fb;
  --paper: #ffffff;
  --panel: #ffffff;
  --text: #172238;
  --ink: #172238;
  --muted: #66738a;
  --line: #dce4ef;
  --line-strong: #c5d1e1;
  --blue: #2867c7;
  --blue-soft: #eaf2ff;
  --green: #187451;
  --green-soft: #e8f5ef;
  --red: #b64242;
  --red-soft: #fdecec;
  --amber: #9b6500;
  --amber-soft: #fff4d8;
  --violet: #6547bf;
  --violet-soft: #f0edff;
  --radius: 10px;
  --r: 10px;
  --shadow: 0 10px 28px rgba(31, 51, 79, 0.08);
  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html { color-scheme: light; }
body { font-family: var(--font); }

.card, .panel, .lesson-card, .dashboard-card {
  border-color: var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

button, .btn, select, input, textarea { font: inherit; }
.btn, button { border-radius: 8px; }
.btn-primary { background: var(--blue); border-color: var(--blue); }

input:focus, textarea:focus, select:focus,
button:focus-visible, a:focus-visible {
  outline: 3px solid rgba(40, 103, 199, 0.24);
  outline-offset: 2px;
}

@media (max-width: 720px) {
  .card { padding: 16px; }
}