/**
 * Theme-aware marketing icons (img SVG) — separate surfaces & tints per theme.
 */
:root {
  --icon-surface-bg: linear-gradient(145deg, rgba(123, 66, 246, 0.22), rgba(6, 182, 212, 0.1));
  --icon-surface-border: rgba(255, 255, 255, 0.1);
  --icon-mark-filter: brightness(0) invert(1) opacity(0.88);
  --icon-trust-filter: brightness(0) invert(1) opacity(0.82);
  --icon-trust-bg: rgba(123, 66, 246, 0.12);
  --ob-icon-glyph: #c4b5fd;
  --ob-icon-github: #e6edf3;
}

html[data-theme="light"] {
  --icon-surface-bg: linear-gradient(145deg, #ede9fe 0%, #e0f2fe 100%);
  --icon-surface-border: rgba(109, 40, 217, 0.18);
  --icon-mark-filter: brightness(0) saturate(100%) invert(22%) sepia(72%) saturate(3200%)
    hue-rotate(252deg) brightness(92%) contrast(96%);
  --icon-trust-filter: brightness(0) saturate(100%) invert(28%) sepia(55%) saturate(2400%)
    hue-rotate(248deg) brightness(94%) contrast(94%);
  --icon-trust-bg: #f5f3ff;
  --ob-icon-glyph: #6d28d9;
  --ob-icon-github: #24292f;
}

.build-card__icon {
  background: var(--icon-surface-bg);
  border-color: var(--icon-surface-border);
}

.build-card__icon img {
  filter: var(--icon-mark-filter);
  transition: transform var(--duration-normal, 280ms) var(--ease-out), filter var(--duration-normal, 280ms) var(--ease-out);
}

.build-card:hover .build-card__icon img {
  transform: scale(1.06);
}

/* Trust pillars — colored SVGs, no filter (filter breaks black strokes on light theme) */
.trust-pillar > img {
  filter: none;
  padding: 0.35rem;
  border-radius: 10px;
  background: var(--icon-trust-bg);
  box-sizing: content-box;
  transition: transform var(--duration-normal, 280ms) var(--ease-out);
}

.trust-pillar:hover > img {
  transform: scale(1.05);
}

.metaphor-card__icon {
  background: var(--icon-surface-bg);
  border-color: var(--icon-surface-border);
}

.metaphor-card__icon img {
  filter: var(--icon-mark-filter);
}

/* Onboarding option tiles — unified glyph tint; brand logos excepted */
.ob-option__icon {
  background: var(--icon-surface-bg);
  border: 1px solid var(--icon-surface-border);
}

.ob-option__icon--glyph {
  color: var(--ob-icon-glyph);
}

.ob-option__icon--glyph svg {
  display: block;
}

.ob-option__icon--brand.ob-option__icon--github {
  color: var(--ob-icon-github);
}

.ob-option__icon--brand.ob-option__icon--github svg {
  display: block;
}

.ob-option.selected .ob-option__icon {
  background: linear-gradient(145deg, rgba(123, 66, 246, 0.32), rgba(6, 182, 212, 0.14));
  border-color: rgba(123, 66, 246, 0.38);
}

html[data-theme="light"] .ob-option.selected .ob-option__icon {
  background: linear-gradient(145deg, #ddd6fe 0%, #bae6fd 100%);
  border-color: rgba(109, 40, 217, 0.35);
}