/*
 * ╔══════════════════════════════════════════════════════╗
 * ║         SCOUT PRIVILEGE — BRAND CONFIGURATION        ║
 * ╠══════════════════════════════════════════════════════╣
 * ║  1. Drop your logo file in:                          ║
 * ║     static/images/logo.png                           ║
 * ║                                                      ║
 * ║  2. Change --brand to your logo's exact blue color.  ║
 * ║     Everything (header, footer, buttons, accents)    ║
 * ║     will update automatically.                       ║
 * ╚══════════════════════════════════════════════════════╝
 */

:root {
  /* ─── YOUR BRAND COLOR ────────────────────────────────
     Change this ONE value to match your logo's blue.
     Use a hex code — e.g. #0047AB, #1560BD, #003087
  ─────────────────────────────────────────────────────── */
  --brand:          #1d4ed8;   /* ← CHANGE THIS to your logo blue */

  /* These are auto-derived — no need to touch them */
  --brand-dark:     color-mix(in srgb, var(--brand) 75%, #000);
  --brand-light:    color-mix(in srgb, var(--brand) 60%, #fff);
  --brand-pale:     color-mix(in srgb, var(--brand) 15%, #fff);
  --brand-soft:     color-mix(in srgb, var(--brand)  8%, #fff);

  /* Navy (header/footer dark bg) — change if needed */
  --brand-navy:     #0d1b3e;
  --brand-navy-mid: #1a3160;

  /* Red accent (from Lebanon Scout logo) */
  --brand-red:      #c0392b;
  --brand-red-dark: #962d22;
  --brand-red-pale: color-mix(in srgb, #c0392b 12%, #fff);
}