/* Approved copy and icon refinement; existing geometry and typography stay in
   styles.css and visuals.css. Longer approved titles wrap instead of clipping. */
/* Approved Soft Steel Blue section and Infrastructure Details modal eyebrows. */
main .eyebrow,
#infrastructure-dialog > .eyebrow {
  color: #9eb5c6;
}

.feature-card h3 {
  white-space: normal;
}

/* These tone tokens are consumed only by the sixteen requested icons. */
[data-icon-tone="blue"] {
  --refined-icon: #79afff;
}
[data-icon-tone="teal"] {
  --refined-icon: #6dc2b6;
}
[data-icon-tone="cyan"] {
  --refined-icon: #69bbd5;
}
[data-icon-tone="steel"] {
  --refined-icon: #a0b7d4;
}
[data-icon-tone="silver"] {
  --refined-icon: #cbd5e1;
}

.feature-card[data-icon-tone] > .icon,
.infrastructure-principles > .principle[data-icon-tone] > .icon {
  color: var(--refined-icon);
}

/* Additional approved refinement: only the four hero-strip SVG strokes. */
.principles-grid > .principle[data-icon-tone] > .icon {
  stroke: var(--refined-icon);
}

/* Let the longest approved label use the existing right-hand padding on narrow
   phones, keeping the icon, type size and two-column highlight layout intact. */
@media (max-width: 360px) {
  .infrastructure-principles > .principle:nth-child(2) > div {
    margin-right: -12px;
  }
}

/* Approved action palette. Geometry, timing and movement remain in styles.css. */
.button {
  background: #9eb5c6;
  color: #061215;
  border-color: #9eb5c6;
  box-shadow: inset 0 0 18px #9eb5c615;
}
.button:hover {
  background: #b7c9d5;
  border-color: #b7c9d5;
  box-shadow: 0 0 25px #9eb5c624;
}
.button.button-outline,
.telegram-button,
.menu-toggle {
  background: transparent;
  color: #9eb5c6;
  border-color: #9eb5c6;
}
.button.button-outline:hover,
.telegram-button:hover,
.menu-toggle:hover {
  background: transparent;
  color: #b7c9d5;
  border-color: #b7c9d5;
}
.dialog-close,
.dialog-telegram {
  color: #9eb5c6;
}
.dialog-close:hover,
.dialog-telegram:hover {
  color: #b7c9d5;
}
.button:focus-visible,
.telegram-button:focus-visible,
.menu-toggle:focus-visible,
.dialog-close:focus-visible,
.dialog-telegram:focus-visible {
  outline: 2px solid #9eb5c6;
  outline-offset: 6px;
}

/* Approved process-circle palette; original circle geometry is unchanged. */
.process-grid > .process-card > .step-number {
  color: #061215;
}
.process-grid > .process-card:nth-child(1) > .step-number {
  background: #b7c4ce;
}
.process-grid > .process-card:nth-child(2) > .step-number {
  background: #79afff;
}
.process-grid > .process-card:nth-child(3) > .step-number {
  background: #6dc2b6;
}