/* CDLCore's brand surface is fixed across portals and saved theme preferences. */
:root {
  --cdlcore-ink: #e5e7eb;
  --cdlcore-muted: #a8b3c7;
  --cdlcore-line: #334155;
  --cdlcore-panel: #111827;
  --cdlcore-page: #020617;
  --cdlcore-soft: #0f172a;
  --cdlcore-control: #1e293b;
  --cdlcore-accent: #60a5fa;
  --cdlcore-accent-strong: #93c5fd;
  --cdlcore-accent-soft: #172554;
  --cdlcore-success: #a7f3d0;
  --cdlcore-success-soft: #064e3b;
  --cdlcore-danger: #fca5a5;
  --cdlcore-danger-soft: #450a0a;
  --cdlcore-warning: #fbbf24;
  --cdlcore-warning-soft: #4a380f;
  --cdlcore-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
  --cdlcore-background:
    radial-gradient(circle at 50% 0%, rgba(37, 99, 235, 0.18), transparent 34%),
    linear-gradient(135deg, #020617 0%, #0f172a 52%, #111827 100%);
}

:root,
body,
body.theme-light,
body.theme-dark {
  color-scheme: dark;
  --ink: var(--cdlcore-ink);
  --muted: var(--cdlcore-muted);
  --line: var(--cdlcore-line);
  --panel: var(--cdlcore-panel);
  --page: var(--cdlcore-page);
  --soft: var(--cdlcore-soft);
  --nav: var(--cdlcore-page);
  --nav-soft: var(--cdlcore-control);
  --accent: var(--cdlcore-accent);
  --accent-strong: var(--cdlcore-accent-strong);
  --accent-soft: var(--cdlcore-accent-soft);
  --success: var(--cdlcore-success);
  --success-soft: var(--cdlcore-success-soft);
  --danger: var(--cdlcore-danger);
  --danger-soft: var(--cdlcore-danger-soft);
  --gold: var(--cdlcore-warning);
  --warning: var(--cdlcore-warning);
  --warning-soft: var(--cdlcore-warning-soft);
  --correct: var(--cdlcore-success);
  --correct-soft: var(--cdlcore-success-soft);
  --wrong: var(--cdlcore-danger);
  --wrong-soft: var(--cdlcore-danger-soft);
  --shadow: var(--cdlcore-shadow);
}

html body {
  background: var(--cdlcore-background);
  color: var(--ink);
}

body .primary-button,
body .student-portal-primary {
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.22);
}

body .primary-button:hover,
body .student-portal-primary:hover {
  background: #3b82f6;
}

body .secondary-button,
body .ghost-button {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--cdlcore-control);
  color: #f1f5f9;
}

body .secondary-button:hover,
body .ghost-button:hover {
  background: #24324a;
  border-color: #475569;
}

body :is(button, a, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 3px;
}

body :is(input, select, textarea) {
  accent-color: var(--accent);
}

body .login-screen,
body .checkin-page,
body .student-portal-page[data-view="auth"],
body .student-portal-page[data-view="app"] {
  background: var(--cdlcore-background);
  color: var(--ink);
}

body .login-screen {
  min-height: 100svh;
}

body.auth-locked {
  overflow-y: auto;
}

body .login-card,
body .checkin-card,
body .student-portal-auth-card,
body .student-portal-loading-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.34);
}

body .login-logo,
body .student-portal-logo,
body .op-auth-logo {
  display: block;
  width: min(280px, 72vw);
  height: auto;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 8px;
  background: #020617;
  box-shadow: 0 24px 70px rgba(2, 6, 23, 0.42);
}

body .student-portal-auth-stage {
  width: min(100%, 430px);
  gap: 22px;
}

body .student-portal-auth-copy h1 {
  color: var(--ink);
  font-size: 2rem;
  line-height: 1;
}

body .student-portal-auth-card .eyebrow,
body .login-card .eyebrow,
body .checkin-card .eyebrow {
  color: var(--accent-strong);
}

body .student-portal-nav button.active {
  background: var(--accent);
  color: #fff;
}

body .student-portal-nav {
  border-color: var(--line);
}

body .student-portal-progress-track {
  background: var(--nav-soft);
}

body .student-portal-progress-track span {
  background: var(--accent);
}

body .signature-pad-wrap,
body #signature {
  /* Keep black signature strokes legible and the exported signature unchanged. */
  background: #fff;
  color-scheme: light;
}

body .site-header {
  border-color: var(--line);
  background: var(--panel);
}

body :is(.hero, .panel, .loading-card, .category-card, .question-card,
  .practice-topbar, .question-jump, .practice-card, .error-card) {
  border-radius: 8px;
}

body .summary-pill,
body .practice-option.selected,
body .jump-button.answered {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

body .option.correct,
body .empty-review {
  background: var(--success-soft);
  color: var(--success);
  border-color: #22c55e;
}

body .review-card .option.user-wrong,
body .error-card {
  background: var(--danger-soft);
  color: var(--danger);
  border-color: #ef4444;
}

body.cdlcore-sign .card,
body.cdlcore-legal main {
  border-color: var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
}

body.cdlcore-sign button {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--cdlcore-control);
  color: var(--ink);
}

body.cdlcore-sign button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

body.cdlcore-sign :is(.school, .muted) {
  color: var(--muted);
}