/* ============================================================
   Empowered Women Alliance — Base element styles
   Light reset + sensible defaults using the tokens.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--text-body);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--type-heading-weight);
  color: var(--text-heading);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p { margin: 0 0 1em; text-wrap: pretty; }

a { color: var(--text-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Eyebrow / kicker label — used above section headings */
.ewa-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-accent);
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}
/* Optional leading rule on eyebrows (—— ABOUT US) */
.ewa-eyebrow--rule::before {
  content: "";
  width: 28px;
  height: 1.5px;
  background: var(--gold-600);
  display: inline-block;
}

/* --- Input focus state --- */
.ewa-input:focus { border-color: var(--gold-600) !important; box-shadow: var(--shadow-focus); }
.ewa-input[data-ondark="true"]::placeholder { color: rgba(255,255,255,0.6); }
.ewa-input::placeholder { color: var(--text-muted); }

.ewa-card--interactive { cursor: pointer; }
.ewa-card--interactive:hover { transform: translateY(-3px); box-shadow: var(--shadow-md) !important; border-color: var(--gold-300) !important; }

/* --- Button interaction states (inline styles set base look) --- */
.ewa-btn { text-decoration: none; }
.ewa-btn:hover { text-decoration: none; }
.ewa-btn[data-variant="primary"]:hover { background: var(--gold-700) !important; border-color: var(--gold-700) !important; box-shadow: var(--shadow-md); transform: translateY(-1px); }
.ewa-btn[data-variant="secondary"]:hover { background: var(--plum-700) !important; border-color: var(--plum-700) !important; box-shadow: var(--shadow-md); transform: translateY(-1px); }
.ewa-btn[data-variant="outline"]:hover { background: var(--plum-800) !important; color: var(--white) !important; }
.ewa-btn[data-variant="outline-light"]:hover { background: rgba(255,255,255,0.12) !important; border-color: #fff !important; }
.ewa-btn[data-variant="ghost"]:hover { color: var(--gold-800) !important; }
.ewa-btn:hover .ewa-btn__arrow { transform: translateX(4px); }
.ewa-btn:active { transform: scale(0.98); box-shadow: var(--shadow-xs); }
.ewa-btn:disabled, .ewa-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }

::selection { background: var(--gold-300); color: var(--plum-900); }

:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }