/* =========================================================
   Bo Renshaw Campaign — Design Tokens
   Colors + Type for State Representative campaign brand
   ========================================================= */

/* ---- Google Fonts (substitutions) ----
   Logo uses a high-contrast Didone serif for "Renshaw" and the
   "Bo" wordmark (likely a custom or proprietary serif). The closest
   free Google Font matches:
     • Display (headlines, name)        → Playfair Display
     • Sub-display / tagline (caps)      → Cormorant Garamond
     • Body / longform                   → Source Serif 4
     • UI / sans for forms, buttons      → Inter
   FLAGGED to user: please supply original logo TTF/OTF if available. */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Cormorant+Garamond:wght@400;500;600;700&family=Source+Serif+4:ital,opsz,wght@0,8..60,300..900;1,8..60,300..900&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* ============================================================
     PALETTE — primary brand
     ============================================================ */
  --br-navy:        #003670;   /* Logo navy ("Bo", tagline, swoosh) */
  --br-navy-deep:   #00254F;   /* Hover / pressed / dense type */
  --br-navy-ink:    #001735;   /* Body text on white */
  --br-red:         #D71920;   /* Logo red ("Renshaw", state outline) */
  --br-red-deep:    #B0121A;   /* Hover / pressed for red CTAs */
  --br-red-bright:  #E73238;   /* Highlights, alerts */

  /* Off-whites and creams — site overrides to clean white. */
  --br-cream:       #FFFFFF;   /* was warm cream, now white for site */
  --br-paper:       #F4F6FA;   /* very pale cool tint (banded sections) */
  --br-bone:        #ECF0F6;   /* subtle accents */

  /* Neutrals */
  --br-ink:         #0F1626;   /* Near-black, body */
  --br-charcoal:    #2A3448;   /* Secondary text */
  --br-slate:       #5C6577;   /* Tertiary text */
  --br-stone:       #8C95A4;   /* Muted text, captions */
  --br-fog:         #C9CDD6;   /* Disabled, divider */
  --br-mist:        #E4E6EB;   /* Subtle borders */
  --br-snow:        #F5F6F8;   /* Surface 2 */
  --br-white:       #FFFFFF;

  /* Star-spangled accent (used sparingly) */
  --br-gold:        #C99B2D;   /* Veteran / endorsement ribbon */

  /* Semantic surfaces */
  --bg-primary:     var(--br-cream);
  --bg-elevated:    var(--br-white);
  --bg-inverse:     var(--br-navy);
  --bg-accent:      var(--br-red);
  --bg-subtle:      var(--br-paper);

  /* Semantic text */
  --fg-primary:     var(--br-ink);
  --fg-secondary:   var(--br-charcoal);
  --fg-tertiary:    var(--br-slate);
  --fg-muted:       var(--br-stone);
  --fg-on-navy:     var(--br-cream);
  --fg-on-red:      var(--br-white);
  --fg-brand:       var(--br-navy);
  --fg-accent:      var(--br-red);

  /* Semantic borders */
  --border-default: var(--br-mist);
  --border-strong:  var(--br-fog);
  --border-brand:   var(--br-navy);

  /* ============================================================
     TYPE FAMILIES
     ============================================================ */
  --font-display:   'Playfair Display', 'Bodoni 72', Didot, 'Times New Roman', serif;
  --font-tagline:   'Cormorant Garamond', 'Trajan Pro', Garamond, serif;
  --font-body:      'Source Serif 4', 'Source Serif Pro', Georgia, 'Times New Roman', serif;
  --font-ui:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:      ui-monospace, 'SF Mono', Menlo, monospace;

  /* ============================================================
     TYPE SCALE (modular, for marketing-weight design)
     ============================================================ */
  --text-xs:     12px;
  --text-sm:     14px;
  --text-base:   17px;     /* body default — slightly larger for serif legibility */
  --text-md:     19px;
  --text-lg:     22px;
  --text-xl:     28px;
  --text-2xl:    36px;
  --text-3xl:    48px;
  --text-4xl:    64px;
  --text-5xl:    84px;
  --text-6xl:    112px;
  --text-display:144px;

  /* Line heights */
  --lh-tight:    1.05;
  --lh-snug:     1.18;
  --lh-normal:   1.45;
  --lh-relaxed:  1.6;
  --lh-loose:    1.8;

  /* Letter spacing — caps benefit from open tracking */
  --ls-display:  -0.02em;   /* Tighten huge serif headlines */
  --ls-normal:   0;
  --ls-wide:     0.06em;
  --ls-caps:     0.18em;    /* "STATE REPRESENTATIVE" tagline */
  --ls-button:   0.08em;

  /* ============================================================
     SPACING — 4px base
     ============================================================ */
  --sp-0:   0;
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-8:   32px;
  --sp-10:  40px;
  --sp-12:  48px;
  --sp-16:  64px;
  --sp-20:  80px;
  --sp-24:  96px;
  --sp-32:  128px;

  /* ============================================================
     RADII — campaign material is mostly square; minimal rounding
     ============================================================ */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   6px;
  --radius-pill: 999px;

  /* ============================================================
     SHADOWS — printed-material feel: soft, low, neutral
     ============================================================ */
  --shadow-xs: 0 1px 2px rgba(0, 23, 53, 0.08);
  --shadow-sm: 0 2px 6px rgba(0, 23, 53, 0.10);
  --shadow-md: 0 6px 18px rgba(0, 23, 53, 0.12);
  --shadow-lg: 0 18px 40px rgba(0, 23, 53, 0.18);
  --shadow-flag: 0 8px 24px rgba(215, 25, 32, 0.18);

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    420ms;

  /* Layout */
  --container-max: 1280px;
  --rule-thick: 4px;
  --star-row-gap: 12px;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================ */
.br-display, h1.br-display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--br-red);
}

.br-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--br-navy);
}

.br-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-3xl);
  line-height: var(--lh-snug);
  color: var(--br-navy);
}

.br-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-2xl);
  line-height: var(--lh-snug);
  color: var(--br-navy);
}

.br-eyebrow {
  font-family: var(--font-tagline);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--br-navy);
}

.br-tagline {
  font-family: var(--font-tagline);
  font-weight: 500;
  font-size: var(--text-xl);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--br-navy);
}

.br-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  color: var(--br-ink);
}

.br-lede {
  font-family: var(--font-body);
  font-weight: 400;
  font-style: italic;
  font-size: var(--text-lg);
  line-height: var(--lh-relaxed);
  color: var(--br-charcoal);
}

.br-quote {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: var(--text-2xl);
  line-height: var(--lh-snug);
  color: var(--br-navy);
}

.br-button-label {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
}

.br-ui {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--br-charcoal);
}

.br-caption {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--br-stone);
}

/* ============================================================
   PATTERNS — repeating decorative motifs (used sparingly)
   ============================================================ */

/* 3-star divider — direct echo of logo's "★ ★ ★" */
.br-stars {
  display: inline-flex;
  gap: var(--star-row-gap);
  color: var(--br-navy);
  font-size: var(--text-sm);
  letter-spacing: 0.4em;
}
.br-stars::before { content: "★ ★ ★"; }

/* Rule with stars in the middle, like the logo */
.br-rule-stars {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  color: var(--br-navy);
}
.br-rule-stars::before,
.br-rule-stars::after {
  content: "";
  flex: 1;
  height: 2px;
  background: currentColor;
}

/* Subtle stars-and-stripes wash for hero backgrounds */
.br-pattern-stripes {
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 38px,
      rgba(0, 54, 112, 0.04) 38px,
      rgba(0, 54, 112, 0.04) 39px
    );
}