/* ==========================================================
   ICONS — utility classes for SVGs injected by js/icons.js
   ----------------------------------------------------------
   Two consumption patterns:
     1. inline SVG: <span class="ds-icon" data-icon="arrow-right"></span>
     2. button child: <button class="btn btn--icon"><span data-icon="close"></span></button>
   Icons inherit currentColor + size from their context.
   ========================================================== */

.ds-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  line-height: 0;
  flex-shrink: 0;
  color: inherit;
  vertical-align: -0.125em;
}

.ds-icon > svg {
  width: 100%;
  height: 100%;
  display: block;
  stroke: currentColor;
  fill: none;
  pointer-events: none;
  overflow: visible;
}

/* Discrete sizes — opt-in. Default = 1em (matches surrounding text). */
.ds-icon--xs { width: 12px;  height: 12px; }
.ds-icon--sm { width: 14px;  height: 14px; }
.ds-icon--md { width: 18px;  height: 18px; }
.ds-icon--lg { width: 22px;  height: 22px; }
.ds-icon--xl { width: 28px;  height: 28px; }

/* Tone modifiers — explicit, never auto. */
.ds-icon--ink     { color: var(--ds-ink, #1a1614); }
.ds-icon--bone    { color: var(--ds-bone, #f4f0e8); }
.ds-icon--oxblood { color: var(--ds-oxblood, #8d2f2a); }
.ds-icon--muted   { color: var(--ds-text-muted, #4a4641); }

/* Stroke weight tweak — applied to descendant SVGs. */
.ds-icon--thin > svg { stroke-width: 1; }
.ds-icon--bold > svg { stroke-width: 2; }

/* Animated rotation for accordion (+) → (×). Caller toggles
   .is-open on the parent <details> via CSS attribute selector. */
.ds-icon--rotates {
  transition: transform var(--ds-dur-normal, 320ms)
    var(--ds-ease-luxury, cubic-bezier(0.25, 0.1, 0.25, 1));
}
details[open] .ds-icon--rotates,
.is-open .ds-icon--rotates {
  transform: rotate(45deg);
}

/* Slide right on hover — for arrow-right inside CTAs.
   Parent button/link hover triggers the translate. */
.ds-icon--slide-x {
  transition: transform var(--ds-dur-normal, 320ms)
    var(--ds-ease-luxury, cubic-bezier(0.25, 0.1, 0.25, 1));
}
a:hover  > .ds-icon--slide-x,
button:hover > .ds-icon--slide-x,
.btn:hover .ds-icon--slide-x,
.btn:focus-visible .ds-icon--slide-x {
  transform: translateX(4px);
}

/* Slide-up loop — used by hero scroll indicator if desired. */
@keyframes ds-icon-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}
.ds-icon--bob {
  animation: ds-icon-bob 1.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .ds-icon--rotates,
  .ds-icon--slide-x { transition: none; }
  .ds-icon--bob     { animation: none; }
}