/* ============================================================================
   QuizEngine — "Chalkboard" design system (shared tokens + base components)
   Warm paper, deep-green academic accent. Used by admin.css and take.css.
   Fonts self-hosted (CSP-safe) — no external CDN.
   ============================================================================ */

/* ── Self-hosted fonts ────────────────────────────────────────────────────── */
@font-face { font-family:'Public Sans'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/static/fonts/public-sans-400.ttf') format('truetype'); }
@font-face { font-family:'Public Sans'; font-style:normal; font-weight:500; font-display:swap;
  src:url('/static/fonts/public-sans-500.ttf') format('truetype'); }
@font-face { font-family:'Public Sans'; font-style:normal; font-weight:600; font-display:swap;
  src:url('/static/fonts/public-sans-600.ttf') format('truetype'); }
@font-face { font-family:'Public Sans'; font-style:normal; font-weight:700; font-display:swap;
  src:url('/static/fonts/public-sans-700.ttf') format('truetype'); }
@font-face { font-family:'Source Serif 4'; font-style:normal; font-weight:500; font-display:swap;
  src:url('/static/fonts/source-serif-4-500.ttf') format('truetype'); }
@font-face { font-family:'Source Serif 4'; font-style:normal; font-weight:600; font-display:swap;
  src:url('/static/fonts/source-serif-4-600.ttf') format('truetype'); }
@font-face { font-family:'Source Serif 4'; font-style:normal; font-weight:700; font-display:swap;
  src:url('/static/fonts/source-serif-4-700.ttf') format('truetype'); }

/* ── Design tokens ────────────────────────────────────────────────────────── */
:root {
  /* Brand green */
  --green:        #2f5d45;
  --green-hover:  #234835;
  --green-link:   #31614a;
  --green-soft:   #e6efe9;   /* green badge bg */

  /* Surfaces (warm paper) */
  --bg:           #faf8f4;   /* app background */
  --bg-2:         #fdfcfa;   /* alt panels */
  --sidebar:      #f3f0e9;   /* nav rail */
  --card:         #ffffff;
  --input-bg:     #fbf9f5;
  --panel-warm:   #f7f4ee;   /* summary/inset panels */

  /* Borders */
  --border:       #e3ded2;
  --border-input: #ddd6c9;
  --border-soft:  #f2eee3;   /* table row divider */

  /* Text */
  --ink:          #26251f;   /* serif headings, strongest */
  --text:         #3c3a33;   /* body strong */
  --text-2:       #57534a;   /* body */
  --muted:        #8a8474;   /* labels, meta */
  --muted-2:      #a8a290;   /* faint (placeholders, chevrons) */
  --pill-count:   #948f80;   /* nav count pills */
  --pill-count-bg:#e8e4d8;

  /* Feedback — colorblind-distinguishable, used ONLY for correctness/scores */
  --ok:           #2f7a52;   --ok-bg:   #e4f0e8;
  --warn:         #b4832a;   --warn-fg: #c99a2e;  --warn-bg: #f0ece4;
  --bad:          #b4593e;   --bad-bg:  #f6e7e2;

  /* Type */
  --font-sans:  'Public Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;

  /* Radius / shadow */
  --r-sm: 6px; --r: 9px; --r-lg: 12px; --r-xl: 14px;
  --shadow-card:  0 1px 3px rgba(47,45,35,.06);
  --shadow-modal: 0 18px 50px rgba(47,45,35,.16);
}

/* ── Base component classes (opt-in; existing pages adopt gradually) ───────── */

/* Buttons */
.qz-btn {
  font-family: var(--font-sans); font-size: 13.5px; font-weight: 600;
  border-radius: var(--r); padding: 10px 18px; cursor: pointer;
  border: 1px solid transparent; transition: background .15s, border-color .15s, color .15s;
}
.qz-btn-primary { background: var(--green); color: #faf8f4; }
.qz-btn-primary:hover { background: var(--green-hover); }
.qz-btn-ghost { background: var(--card); color: var(--text-2); border-color: var(--border-input); }
.qz-btn-ghost:hover { background: var(--bg); }
.qz-btn-danger { background: var(--bad); color: #fff; }

/* Cards */
.qz-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-card); }

/* Stat card */
.qz-stat { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 16px 22px; min-width: 130px; }
.qz-stat-val { font: 600 24px/1 var(--font-serif); color: var(--ink); }
.qz-stat-label { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* Inputs */
.qz-input { font-family: var(--font-sans); font-size: 13.5px; color: var(--text);
  background: var(--input-bg); border: 1px solid var(--border-input); border-radius: var(--r);
  padding: 11px 14px; outline: none; transition: border-color .15s; }
.qz-input:focus { border-color: var(--green); background: #fff; }
.qz-input::placeholder { color: var(--muted-2); }

/* Badges (score / status) */
.qz-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700;
  border-radius: var(--r-sm); padding: 3px 9px; }
.qz-badge-ok   { color: var(--ok);   background: var(--ok-bg); }
.qz-badge-warn { color: var(--warn); background: var(--warn-bg); }
.qz-badge-bad  { color: var(--bad);  background: var(--bad-bg); }
.qz-badge-class{ color: var(--green); background: var(--green-soft); }

/* Table shell */
.qz-table { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.qz-table-head { font-size: 11px; font-weight: 600; letter-spacing: .07em; color: #9a9484; }
.qz-row-divider { border-bottom: 1px solid var(--border-soft); }

/* Serif heading helper */
.qz-h { font-family: var(--font-serif); font-weight: 600; color: var(--ink); }