/* ===== core: Button, IconButton, Badge, Tag, Eyebrow, Icon ===== */

/* Icon */
.es-icon { display: inline-flex; flex: none; vertical-align: middle; }
.es-icon svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.es-icon--fill svg { fill: currentColor; stroke: none; }

/* Button — sized +70% vs baseline; sharp corners via --radius-button */
.es-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: 22px;
  line-height: 1; text-align: center; white-space: nowrap; cursor: pointer;
  border: var(--border-w-strong) solid transparent; border-radius: var(--radius-button);
  padding: 0 42px; min-height: 75px;
  transition: var(--transition-colors), var(--transition-shadow), transform var(--duration-fast) var(--ease-standard);
  text-decoration: none; user-select: none;
}
.es-btn:focus-visible { outline: var(--ring-width) solid var(--focus-ring); outline-offset: var(--ring-offset); }
.es-btn:disabled, .es-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.es-btn .es-icon { width: 1.3em; height: 1.3em; transition: transform var(--duration-base) var(--ease-standard); }
/* trailing arrow glides right on hover (precise, no bounce) */
.es-btn:hover .es-icon:last-child { transform: translateX(6px); }

.es-btn--primary { background: var(--accent); color: var(--accent-contrast); }
.es-btn--primary:hover { background: var(--accent-hover); box-shadow: var(--shadow-accent); }
.es-btn--primary:active { background: var(--accent-active); box-shadow: none; transform: translateY(1px); }

.es-btn--secondary { background: var(--navy); color: var(--text-on-navy); }
.es-btn--secondary:hover { background: var(--navy-hover); box-shadow: var(--shadow-md); }
.es-btn--secondary:active { background: var(--navy-active); box-shadow: none; transform: translateY(1px); }

.es-btn--outline { background: transparent; color: var(--navy); border-color: var(--border-strong); }
.es-btn--outline:hover { border-color: var(--navy); background: var(--navy-50); }
.es-btn--outline:active { background: var(--navy-100); transform: translateY(1px); }

.es-btn--ghost { background: transparent; color: var(--navy); }
.es-btn--ghost:hover { background: var(--navy-50); }
.es-btn--ghost:active { background: var(--navy-100); }

/* text keeps its variant colour in every state (overrides global a:hover) */
.es-btn--primary:hover, .es-btn--primary:focus, .es-btn--primary:active { color: var(--accent-contrast); }
.es-btn--secondary:hover, .es-btn--secondary:focus, .es-btn--secondary:active { color: var(--text-on-navy); }
.es-btn--outline:hover, .es-btn--outline:focus, .es-btn--outline:active { color: var(--navy); }
.es-btn--ghost:hover, .es-btn--ghost:focus, .es-btn--ghost:active { color: var(--navy); }
.es-btn--on-navy:hover, .es-btn--on-navy:focus, .es-btn--on-navy:active { color: var(--text-on-navy); }

/* button on navy surfaces */
.es-btn--on-navy.es-btn--outline { color: var(--text-on-navy); border-color: var(--border-on-navy); }
.es-btn--on-navy.es-btn--outline:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.4); }
.es-btn--on-navy.es-btn--ghost { color: var(--text-on-navy); }
.es-btn--on-navy.es-btn--ghost:hover { background: rgba(255,255,255,0.08); }

.es-btn--sm { min-height: 61px; font-size: 19px; padding: 0 27px; }
.es-btn--lg { min-height: 88px; font-size: 26px; padding: 0 56px; }
.es-btn--block { display: flex; width: 100%; }
/* --compact: original baseline size + rounded corners (used by the header CTA, left untouched) */
.es-btn--compact { min-height: var(--control-h-md); font-size: var(--text-base); padding: 0 var(--space-6); gap: var(--space-2); border-radius: var(--radius-sm); }
.es-btn--compact .es-icon { width: 1.15em; height: 1.15em; }

/* IconButton */
.es-icon-btn {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: var(--control-h-md); height: var(--control-h-md); padding: 0;
  border: var(--border-w-strong) solid transparent; border-radius: var(--radius-sm);
  cursor: pointer; color: var(--navy); background: transparent;
  transition: var(--transition-colors), var(--transition-shadow);
}
.es-icon-btn .es-icon { width: 20px; height: 20px; }
.es-icon-btn:focus-visible { outline: var(--ring-width) solid var(--focus-ring); outline-offset: var(--ring-offset); }
.es-icon-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.es-icon-btn--solid { background: var(--accent); color: var(--accent-contrast); }
.es-icon-btn--solid:hover { background: var(--accent-hover); }
.es-icon-btn--outline { border-color: var(--border-strong); }
.es-icon-btn--outline:hover { border-color: var(--navy); background: var(--navy-50); }
.es-icon-btn--ghost:hover { background: var(--navy-50); }
.es-icon-btn--sm { width: var(--control-h-sm); height: var(--control-h-sm); }
.es-icon-btn--sm .es-icon { width: 18px; height: 18px; }
.es-icon-btn--on-navy { color: var(--text-on-navy); }
.es-icon-btn--on-navy:hover { background: rgba(255,255,255,0.1); }

/* Badge */
.es-badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--text-xs);
  line-height: 1; letter-spacing: var(--tracking-wide); padding: 5px var(--space-2);
  border-radius: var(--radius-xs); text-transform: uppercase;
}
.es-badge .es-icon { width: 13px; height: 13px; }
.es-badge--navy { background: var(--navy-100); color: var(--navy-700); }
.es-badge--accent { background: var(--accent-soft); color: var(--orange-700); }
.es-badge--solid { background: var(--accent); color: var(--accent-contrast); }
.es-badge--success { background: var(--success-soft); color: var(--success-fg); }
.es-badge--warning { background: var(--warning-soft); color: var(--warning-fg); }
.es-badge--danger { background: var(--danger-soft); color: var(--danger-fg); }
.es-badge--neutral { background: var(--gray-150); color: var(--gray-700); }

/* Tag / chip (filters, categories) */
.es-tag {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-sans); font-weight: var(--fw-medium); font-size: var(--text-sm);
  line-height: 1; padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill);
  background: var(--surface-card); color: var(--text-body);
  border: var(--border-w) solid var(--border); cursor: pointer;
  transition: var(--transition-colors);
}
.es-tag:hover { border-color: var(--border-strong); color: var(--text-heading); }
.es-tag[aria-pressed="true"], .es-tag--selected { background: var(--navy-700); color: var(--text-on-navy); border-color: var(--navy-700); }
.es-tag--static { cursor: default; }
.es-tag--static:hover { border-color: var(--border); color: var(--text-body); }

/* Eyebrow / kicker */
.es-eyebrow {
  display: block; font-family: var(--type-eyebrow-font); font-weight: var(--type-eyebrow-weight);
  font-size: var(--type-eyebrow-size); letter-spacing: var(--type-eyebrow-track);
  text-transform: uppercase; color: var(--brand-steel);
}
.es-eyebrow--accent { color: var(--brand-accent); }
.es-eyebrow--muted { color: var(--text-muted); }
.es-eyebrow--on-navy { color: var(--navy-300); }