/*
 * MPJE Review design system: tokens.
 * Built on the CHSPS system (Public Sans + Source Serif 4, one restrained palette,
 * token-based spacing) with MPJE Review's own navy and blue from the logo.
 * Every student page reads these variables; nothing else should hard-code colors.
 */
:root {
  /* Brand */
  --mpj-navy: #162c55;        /* logo navy: headings, active nav, ink on accents */
  --mpj-navy-2: #0f2142;
  --mpj-blue: #1a4f9c;        /* logo blue: the one action color */
  --mpj-blue-hover: #153f7d;
  --mpj-blue-soft: #eaf1fb;   /* selected rows, active tab fill */
  --mpj-blue-line: #c9d8ef;

  /* Neutrals */
  --mpj-paper: #f5f7fa;       /* app background */
  --mpj-surface: #ffffff;
  --mpj-sunken: #f0f3f7;
  --mpj-line: #dde3eb;
  --mpj-line-strong: #c6cfdb;
  --mpj-text: #1c2738;
  --mpj-muted: #5a6879;
  --mpj-faint: #8592a3;

  /* Status (used only for meaning, never decoration) */
  --mpj-success: #26704a;
  --mpj-success-bg: #e8f4ed;
  --mpj-warn: #8a5a12;
  --mpj-warn-bg: #fbf1dd;
  --mpj-danger: #a33030;
  --mpj-danger-bg: #fbecec;

  /* Mastery scale (one hue family, light to dark navy-blue) */
  --mpj-m0: #d5dce6;
  --mpj-m1: #9fb6d6;
  --mpj-m2: #5f86c0;
  --mpj-m3: #2f62ad;
  --mpj-m4: #162c55;

  /* Type */
  --mpj-sans: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mpj-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --mpj-fs-xs: 12px;
  --mpj-fs-sm: 13px;
  --mpj-fs-base: 15px;
  --mpj-fs-md: 17px;
  --mpj-fs-lg: 21px;
  --mpj-fs-xl: 28px;
  --mpj-fs-2xl: 36px;
  --mpj-lh: 1.55;

  /* Space (4px grid) */
  --mpj-s1: 4px;
  --mpj-s2: 8px;
  --mpj-s3: 12px;
  --mpj-s4: 16px;
  --mpj-s5: 24px;
  --mpj-s6: 32px;
  --mpj-s7: 48px;

  /* Shape */
  --mpj-r-sm: 6px;
  --mpj-r: 8px;
  --mpj-r-lg: 12px;
  --mpj-r-pill: 999px;
  --mpj-shadow-sm: 0 1px 2px rgba(15, 33, 66, 0.06);
  --mpj-shadow: 0 6px 20px rgba(15, 33, 66, 0.10);
  --mpj-focus: 0 0 0 3px rgba(26, 79, 156, 0.28);

  /* Layout */
  --mpj-sidebar-w: 248px;
  --mpj-topbar-h: 60px;
  --mpj-content-max: 1200px;
  --mpj-reading-max: 760px;
}