/* Foyer component contracts. Generated tokens supply values; these selectors
   own component anatomy. Product pages select a role, never a local palette. */
.foyer-surface {
  background: var(--bg-grouped);
  color: var(--text-primary);
  font-family: var(--font-family-text);
}
.foyer-card {
  background: var(--bg-raised);
  color: var(--text-primary);
  border: var(--component-card-border-width) solid var(--border-subtle);
  border-radius: var(--component-card-radius-ios);
  padding: var(--component-card-padding);
}
.foyer-stack { display: grid; gap: var(--component-card-gap); }
.foyer-heading { font-family: var(--type-heading-lg-family); font-size: var(--type-heading-lg-size); font-weight: var(--type-heading-lg-weight); line-height: var(--type-heading-lg-leading); }
.foyer-help { color: var(--text-secondary); font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-leading); }
.foyer-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--component-button-gap);
  min-height: var(--component-button-min-height);
  padding: var(--component-button-padding-y) var(--component-button-padding-x);
  border: var(--component-button-border-width) solid transparent;
  border-radius: var(--component-button-radius);
  font-family: var(--type-heading-sm-family);
  font-size: var(--type-heading-sm-size);
  font-weight: var(--type-heading-sm-weight);
  line-height: var(--type-heading-sm-leading);
  text-align: center;
  text-decoration: none;
  white-space: normal;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color var(--motion-duration-fast), border-color var(--motion-duration-fast);
}
.foyer-button[data-variant="primary"] { background: var(--component-button-primary-bg); color: var(--component-button-primary-text); }
.foyer-button[data-variant="primary"]:is(:hover,:active) { background: var(--component-button-primary-bg-pressed); }
.foyer-button[data-variant="secondary"] { background: transparent; color: var(--text-primary); border-color: var(--border-strong); }
.foyer-button[data-variant="tertiary"] { background: transparent; color: var(--text-primary); border-color: var(--border-subtle); }
.foyer-button:is([data-size="compact"],[data-variant="tertiary"]) {
  min-height: var(--component-button-min-height-sm);
  padding: var(--component-button-padding-ysm) var(--component-button-padding-xsm);
  font-size: var(--type-label-lg-size);
}
.foyer-button[data-variant="destructive"] { background: transparent; border-color: var(--text-danger); color: var(--text-danger); }
.foyer-button:is([data-variant="secondary"],[data-variant="tertiary"]):is(:hover,:active) { background: var(--bg-sunken); }
.foyer-button:disabled { opacity: var(--component-button-disabled-opacity); cursor: default; }
.foyer-button:focus-visible,.foyer-field:focus-visible { outline: var(--component-field-focus-ring-width) solid var(--border-focus); outline-offset: var(--component-field-focus-ring-offset); }
.foyer-label { display: grid; gap: var(--space-2); font-family: var(--font-family-text); color: var(--text-primary); }
.foyer-field {
  box-sizing: border-box;
  min-height: var(--component-field-min-height);
  padding: var(--space-4) var(--component-field-padding-x);
  border: var(--component-field-border-width) solid var(--border-default);
  border-radius: var(--component-field-radius);
  background: var(--component-field-background);
  color: var(--text-primary);
  font-family: var(--type-body-md-family);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-leading);
}
.foyer-field[aria-invalid="true"] { border-color: var(--status-danger); }
.foyer-field:disabled { opacity: var(--component-button-disabled-opacity); }
.foyer-field::placeholder { color: var(--text-tertiary); }
.foyer-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.foyer-gallery { max-width: var(--component-layout-content-max-web); margin: auto; padding: var(--component-layout-gutter-web); }
@media (prefers-reduced-motion: reduce) { .foyer-button { transition: none; } }