/* ==========================================================================
   JOSÉ JALAPEÑOS — Brand Configuration
   Source of truth for all brand colors and typography.
   Loads after template CSS (style.css, mainstyle.css) to override defaults.
   Do not put one-off fixes here — use custom.css for those.
   ========================================================================== */

/* Google Fonts — Playfair Display (H1), Lora (H2), Open Sans (body) */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Lora:wght@400;600&family=Open+Sans:wght@400;600&display=swap');

:root {
  /* ── JJ Brand Palette ───────────────────────────────────────────────────── */
  --jj-red:    #C41E1E;   /* Jalapeño Red   — primary CTAs, H1 headlines     */
  --jj-green:  #3D6B35;   /* Chile Green    — navigation, H2, secondary CTAs */
  --jj-cream:  #FFF8E7;   /* Tortilla Cream — warm section backgrounds       */
  --jj-dark:   #2C2C2C;   /* Charcoal       — body text                      */
  --jj-gold:   #F5C842;   /* Sombrero Gold  — festive accents (use sparingly)*/
  --jj-blue:   #2E6CA4;   /* Fiesta Blue    — highlights, special features   */
  --jj-orange: #E8852E;   /* Salsa Orange   — warmth accents (use sparingly) */
  --jj-mole:   #8B1A1A;   /* Mole           — deep accent, red hover state   */

  /* ── Template Variable Overrides ───────────────────────────────────────── */
  /* Remaps the Restics template's generic color slots to JJ brand colors.    */
  /* These cascade automatically through all of style.css and mainstyle.css. */
  --ul-primary:   var(--jj-red);    /* was #EB0029 — primary CTAs, active states   */
  --ul-secondary: var(--jj-green);  /* was #FAA019 — nav, section headers, accents */
  --ul-black:     var(--jj-dark);   /* was #010F1C — dark text/backgrounds          */
  --ul-c3:        var(--jj-cream);  /* was #FFE9C8 — warm card/section backgrounds  */
  --ul-c4:        var(--jj-cream);  /* was #FFF9F4 — warm card/section backgrounds  */
  /* Gradient explicit override: red → green (Mexican flag palette, on-brand)  */
  --ul-gradient: linear-gradient(90deg, var(--jj-red) 0%, var(--jj-green) 100%);
  /* Gold (--jj-gold) is accent-only — apply directly in custom.css rules,    */
  /* never as a broad template override.                                        */

  /* ── Typography ────────────────────────────────────────────────────────── */
  /* Brief spec: Playfair Display (H1), Lora (H2), Open Sans (body)          */
  --font-primary: 'Open Sans', sans-serif;
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-sub:     'Lora', 'Merriweather', Georgia, serif;
}

/* Apply heading fonts — template headings use --font-primary, so we target  */
/* heading tags directly since there's no separate heading variable.          */
h1, .h1 {
  font-family: var(--font-heading);
}
h2, .h2,
h3, .h3 {
  font-family: var(--font-sub);
}