/* ================================================================
   QuizApp DESIGN TOKENS — edit THIS file to change the look.
   ----------------------------------------------------------------
   Every color, radius and font used anywhere in the app is defined
   here as a CSS variable. Components (components.css) only ever
   reference these variables — so changing a value here restyles
   the entire app at once.

   HOW TO WORK: open design/preview.html in a browser, edit a value
   below, save, refresh. (Tip: the VS Code extension "Live Server"
   refreshes the browser automatically on every save.)
   ================================================================ */

:root {
  /* ---------- backgrounds & surfaces ---------- */
  --bg:        #131324;   /* page background */
  --surface:   #1c2440;   /* cards, panels */
  --surface-2: #101a33;   /* inputs, inset areas */
  --border:    #2c3a63;   /* card & input borders */

  /* ---------- text ---------- */
  --text:      #eef0f6;   /* main text */
  --text-dim:  #9aa3bd;   /* secondary text, labels */

  /* ---------- brand & action colors ---------- */
  --accent:     #e94560;  /* primary buttons, highlights, selection */
  --accent-ink: #ffffff;  /* text ON TOP of the accent color */
  --gold:       #f0b429;  /* trophies, 1st place, gold badges */

  /* ---------- status colors (reserved — never for decoration) ---------- */
  --ok:   #34c77b;        /* correct answer, success */
  --warn: #f5a524;        /* warnings, pending review */
  --bad:  #ef4b4b;        /* wrong answer, danger, protest */

  /* ---------- shape & type ---------- */
  --radius: 14px;                                        /* card corner roundness */
  --font: "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* ================================================================
   ALTERNATE PALETTES — starting points, copy values up into :root
   ================================================================

   "Royal Quiz" (deep purple + gold):
     --bg:#171226; --surface:#251c3b; --surface-2:#131022; --border:#3b2f5e;
     --text:#f2eefa; --text-dim:#a79fc2;
     --accent:#f0b429; --accent-ink:#231a08; --gold:#f0b429;
     --ok:#3ecf8e; --warn:#f5a524; --bad:#f25c5c;

   "Neon Night" (charcoal + teal):
     --bg:#10181a; --surface:#17242a; --surface-2:#0c1417; --border:#27404a;
     --text:#eaf4f4; --text-dim:#8fa8ad;
     --accent:#2dd4bf; --accent-ink:#062521; --gold:#ffd166;
     --ok:#4ade80; --warn:#fbbf24; --bad:#fb7185;

   Note: keep themes DARK — quiz nights happen in dim pubs, and a
   white phone screen is a flashlight in the face. A light theme for
   the QM/admin backoffice can be added later as a second :root block
   under a [data-theme="light"] selector.
   ================================================================ */