/* Phase 1 component foundations. Existing pages do not depend on these yet. */
.button {
  min-width: 0;
  min-height: var(--control-height-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0 var(--space-3);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-button);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.button-primary { color: var(--primary-text); background: var(--color-brand); border-color: var(--color-brand); }
.button-secondary { color: var(--color-text-primary); background: var(--color-surface); }
.button-danger { color: var(--color-danger); background: var(--color-surface); border-color: var(--color-danger); }
.surface,
.card { color: var(--color-text-primary); background: var(--color-surface); border: var(--border-width-default) solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.card-raised { background: var(--color-surface-raised); box-shadow: var(--shadow-raised); }
.card-muted { background: var(--color-surface-muted); }
.icon-button { min-width: 0; }
.button:focus-visible,
.icon-button:focus-visible,
button:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }
button:disabled,
.button:disabled { cursor: default; opacity: .58; }
.image-frame { width: 100%; max-width: 100%; overflow: hidden; aspect-ratio: var(--ratio-recipe-card); border-radius: var(--radius-md); }
.image-frame > img { display: block; width: 100%; height: 100%; object-fit: var(--image-fit-cover); object-position: var(--image-position-center); }
.image-frame-cover,
.image-frame-card,
.image-frame-record { aspect-ratio: var(--ratio-recipe-card); object-fit: var(--image-fit-cover); object-position: var(--image-position-center); }
.image-frame-contain,
.image-frame-lightbox { object-fit: var(--image-fit-contain); object-position: var(--image-position-center); }