/* =====================================================================
   WILDFIRE BRAND THEME
   Change colors, the font and the logos for the whole site here.

   Colors: edit the values below. Every page uses these names.
   Logos:  replace the files in this folder, keeping the same names:
           /brand/icon.svg  the app icon (People Flame on its tile)
           /brand/mark.svg  the flame mark used as a large watermark
           Using PNG or another name instead? Change --logo-icon and
           --logo-mark below; every logo on the site follows.
   Font:   /fonts/Inter-latin.woff2. To use another, add its file and
           change --font-body.
   ===================================================================== */
:root{
  /* Core palette */
  --brand-primary: #BF572F;        /* burnt orange: buttons, highlights, progress */
  --brand-primary-hover: #A94C28;
  --brand-primary-text: #B4522C;   /* orange for small text on light backgrounds */
  --brand-accent: #A9D6E5;         /* light blue: app icon tile, notices */
  --brand-deep: #7B1E2E;           /* maroon: glows and accents */
  --brand-cream: #FFF4E6;          /* light background */
  --brand-ink: #1F2A33;            /* charcoal: text on light */
  --brand-ink-soft: #455A64;       /* secondary text */
  --brand-night: #0F1517;          /* dark sections */
  --brand-line: #E6D5C0;           /* borders on light */

  /* Glow colors behind dark sections (use rgba so they blend) */
  --glow-1: rgba(191,87,47,.72);
  --glow-2: rgba(123,30,46,.55);
  --glow-3: rgba(169,214,229,.16);

  /* Type and shape */
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --radius-card: 22px;
  --radius-button: 14px;

  /* Logos (every logo on the site uses these two) */
  --logo-icon: url("/brand/icon.svg");
  --logo-mark: url("/brand/mark.svg");
}
@font-face{font-family:"Inter";src:url("/fonts/Inter-latin.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

/* Logo elements (sized where they're used) */
.logo-icon{display:inline-block;flex:none;background:var(--logo-icon) center/contain no-repeat}
.logo-mark{display:block;background:var(--logo-mark) center/contain no-repeat}