/* ==========================================================================
   MySchoolExam — Unified Design System (mse-unified.css)
   The single presentation layer for the whole platform. Loaded LAST in every
   page's <head>. Presentation only: this sheet sets tokens, typography,
   colour and component skins. It never renames a class, id or hook, and it
   does not touch the white-label variables set at runtime —
   var(--brand-primary / --brand-accent / --brand-surface) on the embed
   player and var(--school-primary) injected by auth-ui.js keep working
   exactly as before; nothing here references or overrides them.
   ========================================================================== */

:root {
  /* Brand palette (the platform standard) */
  --mse-navy: #1e40af;
  --mse-blue: #1d4ed8;
  --mse-blue-600: #2563eb;
  --mse-sky: #38bdf8;
  --mse-sky-strong: #0ea5e9;
  --mse-orange: #f97316;
  --mse-orange-hover: #ea580c;
  --mse-orange-dark: #c2410c; /* text shade of the brand orange (contrast) */
  --mse-deep: #172554;
  --mse-ink: #0f172a;

  /* Slate neutrals (the ramp the platform already uses) */
  --mse-body: #334155;
  --mse-muted: #64748b;
  --mse-faint: #94a3b8;
  --mse-line: #e2e8f0;
  --mse-bg: #f8fafc;
  --mse-panel: #ffffff;
  --mse-tint: #eff6ff;

  /* One semantic set, platform-wide */
  --mse-success: #15803d;
  --mse-error: #b91c1c;

  /* Shape */
  --mse-radius: 12px;
  --mse-radius-sm: 10px;
  --mse-radius-pill: 999px;
  --mse-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --mse-shadow-md: 0 4px 6px rgba(15, 23, 42, 0.08);
  --mse-shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.12);

  /* Typography: one family pair, platform-wide */
  --mse-font-body: 'Manrope', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  --mse-font-display: 'Sora', 'Manrope', 'Segoe UI', system-ui, sans-serif;
}

/* ---------- Base typography -------------------------------------------- */
body {
  font-family: var(--mse-font-body);
  color: var(--mse-body);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--mse-font-display);
  color: var(--mse-ink);
}

a { color: var(--mse-blue); }

input, select, textarea, button { font-family: inherit; }

:focus-visible {
  outline: 2px solid var(--mse-sky);
  outline-offset: 2px;
}

/* ---------- Canonical components (the system of record) ---------------- */
.mse-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--mse-radius-sm);
  padding: 11px 20px;
  font-family: var(--mse-font-body);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}
.mse-btn-primary { background: var(--mse-orange); border-color: var(--mse-orange); color: #fff; }
.mse-btn-primary:hover:not(:disabled) { background: var(--mse-orange-hover); border-color: var(--mse-orange-hover); }
.mse-btn-secondary { background: var(--mse-navy); border-color: var(--mse-navy); color: #fff; }
.mse-btn-secondary:hover:not(:disabled) { background: var(--mse-blue); border-color: var(--mse-blue); }
.mse-btn-outline { background: transparent; color: var(--mse-navy); border-color: var(--mse-navy); }
.mse-btn-outline:hover:not(:disabled) { background: var(--mse-tint); }

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

.mse-form label { font-weight: 600; color: var(--mse-ink); }
.mse-form input[type="text"], .mse-form input[type="email"], .mse-form input[type="password"],
.mse-form input[type="number"], .mse-form input[type="tel"], .mse-form input[type="url"],
.mse-form select, .mse-form textarea {
  border: 1px solid var(--mse-line);
  border-radius: var(--mse-radius-sm);
  padding: 10px 12px;
  font-size: 0.95rem;
  color: var(--mse-ink);
  background: #fff;
}
.mse-form input:focus, .mse-form select:focus, .mse-form textarea:focus {
  border-color: var(--mse-blue-600);
  outline: 2px solid rgba(56, 189, 248, 0.35);
  outline-offset: 0;
}

/* ---------- Harmonization of the existing shared classes ---------------
   The platform's pages already converged on one class vocabulary
   (.btn / .btn-primary / .btn-secondary / .btn-outline / .btn-accent).
   These rules give that vocabulary one skin everywhere. Colour, font and
   radius only — no geometry, no layout, no selector renames. The .ms-theme
   scoped twins match the redesign layer's own specificity so the unified
   skin wins on redesign/admin surfaces too. */
.btn { border-radius: var(--mse-radius-sm); }

.btn-primary,
.ms-theme .btn-primary {
  background: var(--mse-orange);
  border-color: var(--mse-orange);
  color: #fff;
  box-shadow: 0 10px 24px rgba(249, 115, 22, 0.22);
}
.btn-primary:hover:not(:disabled),
.ms-theme .btn-primary:hover:not(:disabled) {
  background: var(--mse-orange-hover);
  border-color: var(--mse-orange-hover);
  color: #fff;
}

.btn-accent,
.ms-theme .btn-accent {
  background: var(--mse-orange);
  border-color: var(--mse-orange);
  color: #fff;
  box-shadow: 0 10px 24px rgba(249, 115, 22, 0.22);
}
.btn-accent:hover:not(:disabled),
.ms-theme .btn-accent:hover:not(:disabled) {
  background: var(--mse-orange-hover);
  border-color: var(--mse-orange-hover);
  color: #fff;
}

.btn-secondary,
.ms-theme .btn-secondary {
  background: var(--mse-navy);
  border-color: var(--mse-navy);
  color: #fff;
}
.btn-secondary:hover:not(:disabled),
.ms-theme .btn-secondary:hover:not(:disabled) {
  background: var(--mse-blue);
  border-color: var(--mse-blue);
  color: #fff;
}

.btn-outline,
.ms-theme .btn-outline {
  background: transparent;
  border: 1px solid var(--mse-navy);
  color: var(--mse-navy);
}
.btn-outline:hover:not(:disabled),
.ms-theme .btn-outline:hover:not(:disabled) {
  background: var(--mse-tint);
  color: var(--mse-navy);
}

.card { border-radius: var(--mse-radius); }

/* Embed + offline players: keep their own --brand-* skin (white-label),
   only the typeface joins the platform system. */
.embed-shell, .off-shell { font-family: var(--mse-font-body); }

@media (prefers-reduced-motion: reduce) {
  .btn, .mse-btn { transition: none; }
}