/* ============================================================================
   NBTX THEME TOKENS  —  THE PER-CLIENT FILE
   ----------------------------------------------------------------------------
   This is the ONE file you edit to re-skin the theme for a new client.
   Change the values below (colors, fonts, radius) and the whole site follows.

   Loaded before styles.css. Nothing structural lives here — only design tokens.

   FONT NOTE: changing --font-heading / --font-body also requires updating the
   Google Fonts <link> in _includes/inc_scripts.php (the file that loads the
   actual font files). It's marked there with a matching "FONTS" comment.
   ============================================================================ */

:root{

  /* ---- FONTS -------------------------------------------------------------- */
  --font-heading: "Lora", Georgia, "Times New Roman", serif;
  --font-body:    "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* ---- LAYOUT ------------------------------------------------------------- */
  --container-max: 1320px;
  --container-pad: 20px;

  /* ---- RADIUS ------------------------------------------------------------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 18px;

  /* ---- TRANSITIONS -------------------------------------------------------- */
  --transition-fast: .2s ease;
  --transition-base: .35s ease;
  --transition-long: 0.6s linear;

  /* ======================================================================== */
  /* PRIMARY BRAND  ── Spencer Fuller Mortgage                                */
  /* ======================================================================== */
  --brand-color1:      #1F2F4C;   /* navy — logo, headings, primary buttons  */
  --brand-color1-dark: #16233A;   /* hover/active state for navy             */
  --brand-primary:     var(--brand-color1);   /* alias */

  /* ======================================================================== */
  /* SECONDARY / ACCENT COLORS                                                */
  /* NOTE: --brand-color2 (gold) only has ~2.2:1 contrast with white — do not */
  /* pair white text on a solid gold button/background (fails WCAG AA). Use   */
  /* gold on white/light backgrounds, as a border/underline accent, or with   */
  /* dark (--text/--brand-color1) text on top of it instead.                 */
  /* ======================================================================== */
  --brand-color2:       #CFA877;   /* gold — logo accent, secondary accents   */
  --brand-color2-light: #E3C69F;   /* lighter gold for hover/tints            */
  --accent-slate:       #3f4a4a;   /* dark slate used on some headings/text   */
  --accent-muted:       #A1ABB2;   /* muted blue-grey                         */
  --accent-warm:        #f26722;   /* warm orange highlight                   */
  --brand-accent:       #6B6B6B;   /* neutral grey accent                     */

  /* ---- TEXT --------------------------------------------------------------- */
  --text: #1A1A1A;

  /* ---- LINKS -------------------------------------------------------------- */
  --link:       var(--brand-color1);
  --link-hover: var(--brand-color1-dark);

  /* ---- BUTTONS ------------------------------------------------------------ */
  --btn-grey:  #6B6B6B;
  --btn-black: #1A1A1A;

  /* ---- HIGHLIGHTS --------------------------------------------------------- */
  --highlight:    #F4F4F4;
  --highlight-bg: var(--highlight);   /* alias */

  /* ---- BACKGROUNDS -------------------------------------------------------- */
  --bgrd-light: #FFFFFF;
  --bgrd-soft:  #E7E7E7;
  --bgrd-dark:  #16233A;   /* dark sections use deep brand navy, not black */
}