/* Rexflow dark icon integration system
   Purpose: keep approved SVGs intact, improve readability through context layer.
*/

:root {
  --rx-bg: #070B16;
  --rx-bg-soft: #0B1020;
  --rx-surface: rgba(255,255,255,0.045);
  --rx-surface-strong: rgba(255,255,255,0.072);
  --rx-border: rgba(229,231,235,0.13);
  --rx-border-strong: rgba(229,231,235,0.22);

  --rx-icon-primary: #F8FAFC;
  --rx-icon-secondary: #CBD5E1;
  --rx-icon-muted: #94A3B8;
  --rx-accent: #D4A514;

  --rx-text: #F8FAFC;
  --rx-text-muted: #AAB6C8;
  --rx-radius-sm: 12px;
  --rx-radius-md: 16px;
  --rx-radius-lg: 22px;
}

/* Base icon behavior */
.rx-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--rx-icon-primary);
  flex: 0 0 auto;
}

.rx-icon svg {
  display: block;
  width: var(--rx-icon-size, 24px);
  height: var(--rx-icon-size, 24px);
  overflow: visible;
}

/* Variant A: plain inline
   Use only where icon is near strong text and background is not too busy.
*/
.rx-icon--plain {
  --rx-icon-size: 26px;
  color: var(--rx-icon-primary);
}

/* Variant B: compact chip
   Recommended default for feature cards, use-case blocks and mobile sections.
*/
.rx-icon-chip {
  --rx-icon-size: 25px;
  width: 48px;
  height: 48px;
  border-radius: var(--rx-radius-md);
  color: var(--rx-icon-primary);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.078), rgba(255,255,255,0.035));
  border: 1px solid var(--rx-border-strong);
}

/* Variant C: elevated tile
   Use for hero-supporting blocks, CTA-supporting elements and section anchors.
*/
.rx-icon-tile {
  --rx-icon-size: 30px;
  width: 64px;
  height: 64px;
  border-radius: var(--rx-radius-lg);
  color: var(--rx-icon-primary);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.105), rgba(255,255,255,0.045));
  border: 1px solid rgba(229,231,235,0.18);
}

/* Muted usage for secondary/metadata icons only */
.rx-icon--muted {
  color: var(--rx-icon-secondary);
}

/* Critical/key icons can be scaled rather than thickened */
.rx-icon--key {
  --rx-icon-size: 32px;
}

/* Avoid putting yellow on the whole icon; SVG accent remains micro-highlight. */
.rx-icon--accent-safe {
  color: var(--rx-icon-primary);
}

/* Real landing patterns */
.rx-feature-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.025));
  border: 1px solid var(--rx-border);
  border-radius: 24px;
  padding: 22px;
}

.rx-feature-card--strong {
  background: linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.034));
  border-color: var(--rx-border-strong);
}

.rx-usecase-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px;
  border-radius: 20px;
  background: rgba(255,255,255,0.032);
  border: 1px solid rgba(229,231,235,0.11);
}

.rx-cta-icon {
  --rx-icon-size: 28px;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  color: var(--rx-icon-primary);
  background: rgba(255,255,255,0.072);
  border: 1px solid rgba(212,165,20,0.34);
}

/* Responsive visibility boost */
@media (max-width: 680px) {
  .rx-icon-chip {
    --rx-icon-size: 27px;
    width: 52px;
    height: 52px;
  }

  .rx-icon-tile {
    --rx-icon-size: 31px;
    width: 60px;
    height: 60px;
  }

  .rx-feature-card {
    padding: 20px;
  }
}