/* ============================================
   RETIREMENT RED FLAGS — MASTER DESIGN TOKENS
   Own brand, own token set (--rrf-*). Colors
   carried over from the GoHighLevel site; light
   refresh, not a redesign.

   Contrast (WCAG 2.x):
     red   #D11947 on white    5.33:1  AA text
     red   #D11947 on mist     4.89:1  AA text
     white on red  #D11947     5.33:1  AA text (buttons)
     white on red-hover #A8133C 7.44:1 AAA
     ink   #252525 on white   15.3:1   AAA
   Palette is red + white only (no navy). Dark
   bands (top bar, footer, --red sections) are
   red with white text.
   ============================================ */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* --- Colors --- */
  --rrf-red:          #D11947;
  --rrf-red-hover:    #A8133C;  /* darker for hover/active; 7.44:1 with white */
  --rrf-ink:          #252525;
  --rrf-black:        #000000;
  --rrf-mist:         #F5F5F5;
  --rrf-white:        #FFFFFF;
  --rrf-text-muted:   #555555;  /* 7.46:1 on white, 6.84:1 on mist */
  --rrf-border:       #D6D6D6;
  --rrf-focus:        #252525;  /* white on red bands, see header/footer */

  /* --- Typography --- */
  --rrf-font:         'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --rrf-regular:      400;
  --rrf-medium:       500;
  --rrf-semibold:     600;
  --rrf-bold:         700;

  /* --- Type scale (body 18px — audience is retirees) --- */
  --rrf-small:        16px;
  --rrf-body:         18px;
  --rrf-lede:         21px;
  --rrf-h4:           22px;
  --rrf-h3:           26px;
  --rrf-h2:           36px;
  --rrf-h1:           48px;
  --rrf-eyebrow:      14px;
  --rrf-line:         1.65;
  --rrf-line-tight:   1.2;

  /* --- Spacing --- */
  --rrf-space-1:      4px;
  --rrf-space-2:      8px;
  --rrf-space-3:      12px;
  --rrf-space-4:      16px;
  --rrf-space-5:      24px;
  --rrf-space-6:      32px;
  --rrf-space-7:      48px;
  --rrf-space-8:      64px;
  --rrf-space-9:      96px;

  --rrf-section-v:    80px;
  --rrf-section-h:    32px;
  --rrf-max-width:    1160px;
  --rrf-text-width:   720px;

  /* --- Radii & shadows --- */
  --rrf-radius:       6px;
  --rrf-radius-card:  10px;
  --rrf-shadow:       0 6px 24px rgba(0, 0, 0, 0.08);
}

/* --- Mobile overrides --- */
@media (max-width: 768px) {
  :root {
    --rrf-h1:         36px;
    --rrf-h2:         30px;
    --rrf-h3:         24px;
    --rrf-lede:       19px;
    --rrf-section-v:  56px;
    --rrf-section-h:  20px;
  }
}

@media (max-width: 480px) {
  :root {
    --rrf-h1:         32px;
    --rrf-h2:         26px;
  }
}

/* --- Base --- */
html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--rrf-font);
  font-size: var(--rrf-body);
  font-weight: var(--rrf-regular);
  line-height: var(--rrf-line);
  color: var(--rrf-ink);
  background: var(--rrf-white);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--rrf-red);
}

a:hover {
  color: var(--rrf-red-hover);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

:focus-visible {
  outline: 3px solid var(--rrf-focus);
  outline-offset: 2px;
}

.rrf-skip-link {
  position: absolute;
  left: 8px;
  top: -100px;
  z-index: 2000;
  background: var(--rrf-red);
  color: var(--rrf-white);
  padding: 12px 18px;
  border-radius: var(--rrf-radius);
  font-weight: var(--rrf-semibold);
}

.rrf-skip-link:focus {
  top: 8px;
  color: var(--rrf-white);
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}