/* ============================================================
   theme.css  —  DESIGN TOKENS
   ------------------------------------------------------------
   This is the SINGLE place to adjust the site's look.
   Colors, fonts, type scale, spacing, and the fixed-header
   height all live here as CSS custom properties (variables).

   Palette matches the Summer Bible Classes page:
   cream canvas + maroon / deep-brown / orange-red accents.
   If any value differs from that page, paste its exact hex here
   and the whole site updates at once.
   ============================================================ */

:root {

  /* ---- Brand colors ---------------------------------------- */
  --bg:             #fdfbf7;   /* page canvas (warm cream)      */
  --bg-soft:        #f4ece0;   /* recessed surfaces / bands     */
  --bg-card:        #ffffff;   /* cards on the cream            */

  --maroon:         #7a1f2b;   /* primary accent (CTAs)         */
  --maroon-deep:    #5e141d;   /* hover / pressed maroon        */

  --brown:          #7a4a2c;   /* secondary accent              */
  --brown-deep:     #3a2417;   /* deep brown (dark bands, text) */

  --orange-red:     #c4502a;   /* highlight / underlines        */
  --orange-red-soft:#e08a5a;   /* soft highlight                */

  --ink:            #2a2018;   /* primary text (warm near-black)*/
  --ink-soft:       #5e4d3e;   /* secondary text                */
  --line:           rgba(58, 36, 23, 0.14);  /* hairline borders */

  /* On dark/photo surfaces (hero, header-over-hero)            */
  --on-dark:        #fbf6ee;
  --on-dark-soft:   rgba(251, 246, 238, 0.82);

  /* ---- Typography ------------------------------------------ */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Lora', Georgia, serif;

  /* Fluid type scale (min, preferred, max)                     */
  --fs-hero:   clamp(2.6rem, 6vw, 5rem);     /* slogan / H1      */
  --fs-h2:     clamp(2rem, 4vw, 3.25rem);    /* section titles   */
  --fs-h3:     clamp(1.3rem, 2.2vw, 1.7rem);
  --fs-body:   clamp(1rem, 1.15vw, 1.15rem);
  --fs-small:  0.8rem;                       /* labels, eyebrows */

  /* ---- Layout & rhythm ------------------------------------- */
  --content-max:  1200px;                    /* container width  */
  --gutter:       clamp(1.25rem, 4vw, 3rem); /* side padding     */
  --section-pad:  clamp(3.5rem, 7vw, 7rem);  /* vertical rhythm  */
  --header-h:     92px;                       /* fixed header     */
  --radius:       4px;
  --ease:         cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Shorter header on small screens */
@media (max-width: 1024px) {
  :root { --header-h: 64px; }
}