/* ==========================================================================
   THEME — the only file you edit to reskin a project.
   Change the variables below; the layout in style.css never changes.

   How color works in this template:
   You define ~13 FLAT colors here. style.css turns them into layered
   gradients automatically with color-mix() — e.g. the card surface blends
   --bg-card toward white at the top and toward --bg at the bottom, the
   page gets a soft light bloom + vignette from --bg, and buttons/progress
   glow with --accent. So: pick flat colors, get depth for free.
   ========================================================================== */

/* Optional: load custom fonts here, then reference them in the variables.
   Example (self-hosted, put the files in public/fonts/):

   @font-face {
     font-family: "MySerif";
     src: url("fonts/my-serif.woff2") format("woff2");
     font-display: swap;
   }
*/

:root {
  /* ---- Surfaces ------------------------------------------------------- */
  --bg:             #0d1018;   /* page background (deepest tone)           */
  --bg-card:        #1d2431;   /* card surface (a step lighter than --bg)  */
  --bg-inset:       #141a25;   /* input fields, wells inside the card      */
  --card-border:    #3d4a61;   /* subtle card outline                      */

  /* ---- Text ----------------------------------------------------------- */
  --text:           #eef0f4;   /* main reading text                        */
  --text-muted:     #93a0b5;   /* secondary text, icons, placeholders      */

  /* ---- Accent — swap this pair to recolor every button, pill, progress
          bar, and focus ring at once. Alternates that work on these dark
          surfaces (keep --accent-contrast as is):
            amber    #f0b264   (default)
            coral    #f28d76
            mint     #7fd8b4
            lavender #b9a7f2
            sky      #7ea2e8                                               */
  --accent:         #f0b264;
  --accent-contrast:#161c28;   /* text on top of the accent color          */

  --progress-track: #2c3444;   /* inactive progress segments               */
  --error:          #ff9d8a;   /* inline validation messages               */

  /* ---- Type ----------------------------------------------------------- */
  --font-body:      Georgia, "Iowan Old Style", "Times New Roman", serif;
  --font-ui:        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* ---- Shape ---------------------------------------------------------- */
  --radius:         20px;      /* card corner radius                       */
}

/* --------------------------------------------------------------------------
   PRESETS — copy a block over the values above (or just uncomment it below
   the :root block; later rules win).

   WARM CHARCOAL (dark, neutral)
   :root {
     --bg: #14110c; --bg-card: #262019; --bg-inset: #1b1712;
     --card-border: #4a4033;
     --text: #f4ede1; --text-muted: #b5a68f;
     --accent: #e8935e; --accent-contrast: #1d1913;
     --progress-track: #3a332a; --error: #ff9d84;
   }

   CREAM (light, warm)
   :root {
     --bg: #f3e7d3; --bg-card: #fdf8ef; --bg-inset: #f0e3cd;
     --card-border: #e2cda9;
     --text: #4b3a26; --text-muted: #a08a67;
     --accent: #e08b57; --accent-contrast: #fffaf2;
     --progress-track: #e5d3b4; --error: #c0492c;
   }

   MAROON (dark, dramatic)
   :root {
     --bg: #2a0e0c; --bg-card: #431714; --bg-inset: #351110;
     --card-border: #7a4038;
     --text: #f5e9dc; --text-muted: #c9a99a;
     --accent: #e8a87c; --accent-contrast: #2a0e0c;
     --progress-track: #5b2d27; --error: #ff8f7a;
   }

   SKY (light, airy)
   :root {
     --bg: #e4edf6; --bg-card: #f7fafd; --bg-inset: #dfe9f2;
     --card-border: #bdd2e4;
     --text: #29394a; --text-muted: #7c92a8;
     --accent: #4d8fd1; --accent-contrast: #f7fafd;
     --progress-track: #cfdfec; --error: #c0492c;
   }
   ------------------------------------------------------------------------ */