/* ============================================================
 *  BASIC BIBLE — THEME
 * ============================================================
 *  This is the ONLY file you need to touch to restyle the game.
 *  Change a color, a font, or the logo here and it updates
 *  everywhere. Colors accept any CSS value (hex, rgb, etc).
 * ============================================================ */

:root {
  /* ---- BRAND COLORS ---- */
  --color-bg:            #0f172a;   /* page background (deep navy) */
  --color-bg-2:         #1e293b;   /* secondary background */
  --color-surface:       #1b2540;   /* cards / panels */
  --color-surface-2:    #24304f;   /* raised elements (answer buttons) */
  --color-text:          #f1f5f9;   /* main text */
  --color-text-dim:      #94a3b8;   /* muted text */

  --color-primary:       #f5b301;   /* main accent (warm gold) */
  --color-primary-ink:   #1a1205;   /* text drawn ON the accent */

  --color-correct:       #22c55e;   /* right answer */
  --color-wrong:         #ef4444;   /* wrong answer */
  --color-streak:        #fb923c;   /* streak flame */

  /* ---- BACKGROUND GLOW (decorative) ---- */
  --glow-1: #f5b30122;
  --glow-2: #38bdf822;

  /* ---- TYPOGRAPHY ---- */
  --font-body: "Quicksand", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Quicksand", system-ui, sans-serif;

  /* ---- SHAPE ---- */
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.7);
  --ring: 0 0 0 3px var(--color-primary);

  /* ---- BRAND TEXT ---- */
  --brand-title: "Basic Bible";
  --brand-tagline: "How well do you know the Word?";
}

/*  LOGO
 *  The logo is an <img> in index.html pointing at assets/logo.svg.
 *  To use your own: drop a file in /assets and update the src in
 *  index.html (search for id="brand-logo"), OR just replace
 *  assets/logo.svg with your own SVG/PNG of the same name.
 */

/*  LIGHT THEME EXAMPLE (optional)
 *  Uncomment to flip the game to a light palette:
 *
 *  :root {
 *    --color-bg: #fdf6e3; --color-bg-2:#f4ead0; --color-surface:#ffffff;
 *    --color-surface-2:#fbf3df; --color-text:#2a2410; --color-text-dim:#7a6f4f;
 *    --color-primary:#d97706; --color-primary-ink:#fff;
 *  }
 */