/* ============================================================
   OSSLTPrep design tokens — the single source of truth for the
   brand palette, status colors, radii, shadows and focus styles.

   Load this AFTER each page's inline <style> block so these
   variable values win over the per-page :root declarations that
   drifted apart over time (three different greens for "good",
   modal radii from 12-20px, two border colors, etc.).

   Pages keep their own layout/component CSS; they just resolve
   their var() references against these canonical values.
   ============================================================ */

:root {
  /* Core brand */
  --ink: #0b1a2a;            /* primary text */
  --muted: #5b6b80;          /* secondary text */
  --brand: #2a6bff;          /* primary blue */
  --brand-pressed: #1f56cc;  /* hover/active blue */
  --brand-light: #5a8cff;    /* light accent blue */
  --card: #ffffff;

  /* Dojo accents (student-facing, lighter feel — derived from brand) */
  --dojo-accent: #60a5fa;
  --dojo-accent-light: #93c5fd;

  /* Surfaces & borders */
  --border: #dce6f5;
  --chipBorder: #c7d6ee;
  --soft: #f6f9ff;
  --panel: #eef3ff;

  /* Status colors — text-safe (AA on white) plus chip backgrounds */
  --good: #107a3a;
  --good-bg: #dcfce7;
  --good-border: #bbf7d0;
  --warn: #8a5a00;
  --warn-bg: #fef3c7;
  --warn-border: #fde68a;
  --bad: #b91c1c;
  --bad-bg: #fee2e2;
  --bad-border: #fca5a5;

  /* Radii */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* Shadows — blue-tinted, three levels */
  --shadow-sm: 0 2px 8px rgba(86, 140, 190, 0.12);
  --shadow-md: 0 8px 24px rgba(86, 140, 190, 0.15);
  --shadow-lg: 0 24px 72px rgba(86, 140, 190, 0.22);
}

/* Modal dialogs center themselves via UA margin:auto — universal resets
   (* { margin: 0 }) on some pages were cancelling that. Restore it. */
dialog {
  margin: auto;
}

/* Keyboard focus — visible everywhere, without affecting mouse users. */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Inputs already show a border treatment; tighten the ring to fit. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline-offset: 0;
}