/* ================================================================
   Macondo forms — Button, IconButton, Input, Checkbox, Radio,
   Toggle, Select, Label, HelperText
   Faithful re-expression of macondo atom styles in plain CSS.
   ================================================================ */

/* ---------- Button ---------- */
.sp-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-200);
  flex-shrink: 0;
  height: var(--space-1000);
  padding: 0 var(--space-400);
  border: 1px solid transparent;
  border-radius: var(--border-radius-button);
  font-family: var(--font-sans);
  font-size: var(--caption-font-size);
  line-height: var(--caption-line-height);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.sp-btn i { font-size: 16px; }
.sp-btn:disabled { pointer-events: none; }

/* Primary (default) */
.sp-btn--primary { background: var(--surface-inverse-primary); color: var(--typography-inverse-primary); }
.sp-btn--primary:hover { background: var(--surface-inverse-hover); }
.sp-btn--primary:active { background: var(--surface-inverse-hover); }
.sp-btn--primary:disabled { background: var(--surface-inverse-disabled); color: var(--typography-inverse-tertiary); }

/* Secondary */
.sp-btn--secondary { background: var(--surface-secondary); color: var(--typography-secondary); border-color: var(--border-secondary); }
.sp-btn--secondary:hover { background: var(--surface-hover); }
.sp-btn--secondary:active { background: var(--surface-tertiary); }
.sp-btn--secondary:disabled { background: var(--surface-secondary); color: var(--typography-tertiary); }

/* Tertiary */
.sp-btn--tertiary { background: var(--surface-primary); color: var(--typography-primary); border-color: var(--border-primary); }
.sp-btn--tertiary:hover { background: var(--surface-secondary); border-color: transparent; }
.sp-btn--tertiary:active { background: var(--surface-hover); }
.sp-btn--tertiary:disabled { background: var(--surface-primary); color: var(--typography-tertiary); border-color: var(--border-primary); }

/* Ghost (round) */
.sp-btn--ghost { background: transparent; color: var(--typography-primary); border-radius: var(--border-radius-full); }
.sp-btn--ghost:hover { background: var(--surface-hover); }
.sp-btn--ghost:active { background: var(--surface-tertiary); }

/* Ghost square */
.sp-btn--ghost-square { background: transparent; color: var(--typography-primary); }
.sp-btn--ghost-square:hover { background: var(--surface-hover); }
.sp-btn--ghost-square:active { background: var(--surface-tertiary); }

/* Link */
.sp-btn--link { height: var(--space-900); background: transparent; color: var(--typography-primary); border-radius: 0; border-bottom: 1px solid transparent; padding: 0; }
.sp-btn--link:hover { border-bottom-color: currentColor; }
.sp-btn--link:disabled { color: var(--typography-tertiary); }

/* Critical tone */
.sp-btn--primary.sp-btn--critical { background: var(--critical-fill); color: var(--typography-inverse-primary); }
.sp-btn--primary.sp-btn--critical:hover, .sp-btn--primary.sp-btn--critical:active { background: var(--critical-hover); }
.sp-btn--primary.sp-btn--critical:disabled { background: var(--critical-border); color: var(--typography-inverse-tertiary); }
.sp-btn--secondary.sp-btn--critical { color: var(--critical-text); }

/* Sizes */
.sp-btn--xs { height: var(--space-500); padding: var(--space-050); border-radius: var(--border-radius-badge); }
.sp-btn--xs i { font-size: 16px; }
.sp-btn--sm { height: var(--space-900); }
.sp-btn--lg { height: var(--space-1200); }

/* Icon button */
.sp-icon-btn { aspect-ratio: 1 / 1; padding: 0; }

/* ---------- Input / Textarea ---------- */
.sp-input {
  width: 100%;
  height: var(--space-1000);
  padding: var(--space-200) var(--space-200) var(--space-200) var(--space-300);
  border: 1px solid var(--border-secondary);
  border-radius: var(--border-radius-input);
  background: var(--surface-primary);
  color: var(--typography-primary);
  font-family: var(--font-sans);
  font-size: var(--callout-font-size);
  line-height: var(--callout-line-height);
  outline: none;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
  box-sizing: border-box;
}
.sp-input::placeholder { color: var(--typography-tertiary); }
.sp-input:focus, .sp-input:focus-visible { box-shadow: 0 0 0 1px var(--background), 0 0 0 3px var(--border-focused); }
.sp-input:disabled { pointer-events: none; background: var(--surface-secondary); color: var(--typography-tertiary); }
.sp-input:read-only { background: var(--surface-secondary); }
.sp-input--error { border-color: var(--critical-border); }
.sp-input--error:focus { box-shadow: 0 0 0 1px var(--background), 0 0 0 3px var(--critical-fill); }
.sp-input--sm { height: var(--space-900); }
.sp-input--lg { height: var(--space-1200); }
textarea.sp-input { height: auto; min-height: var(--space-2000); resize: vertical; }

/* Input with leading icon */
.sp-input-wrap { position: relative; display: flex; align-items: center; width: 100%; }
.sp-input-wrap > i { position: absolute; left: var(--space-300); font-size: 16px; color: var(--typography-tertiary); pointer-events: none; }
.sp-input-wrap > i + .sp-input { padding-left: var(--space-900); }

/* ---------- Label / helper text ---------- */
.sp-label { display: block; font-size: var(--callout-font-size); line-height: var(--callout-line-height); font-weight: var(--font-weight-medium); color: var(--typography-primary); }
.sp-helper-text { font-size: var(--caption-font-size); line-height: var(--caption-line-height); color: var(--typography-secondary); }
.sp-helper-text--error { color: var(--critical-text); }
.sp-field { display: flex; flex-direction: column; gap: var(--space-150); }

/* ---------- Checkbox ---------- */
.sp-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 1rem;
  height: 1rem;
  margin: 0;
  flex-shrink: 0;
  border: 1px solid var(--border-secondary);
  border-radius: var(--border-radius-badge);
  background: var(--surface-primary);
  cursor: pointer;
  display: inline-grid;
  place-content: center;
  transition: background-color 0.1s ease;
}
.sp-checkbox:hover { background: var(--surface-secondary); }
.sp-checkbox:checked {
  background-color: var(--surface-inverse-primary);
  border-color: var(--surface-inverse-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 0.75rem;
  background-position: center;
  background-repeat: no-repeat;
}
.sp-checkbox:checked:hover { background-color: var(--surface-inverse-hover); }
.sp-checkbox:disabled { pointer-events: none; opacity: 0.5; background-color: var(--surface-tertiary); border: none; }

/* ---------- Radio ---------- */
.sp-radio {
  appearance: none;
  -webkit-appearance: none;
  width: 1rem;
  height: 1rem;
  margin: 0;
  flex-shrink: 0;
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius-full);
  background: var(--surface-primary);
  cursor: pointer;
  display: inline-grid;
  place-content: center;
  transition: background-color 0.1s ease;
}
.sp-radio:hover { background: var(--surface-secondary); }
.sp-radio:checked { background: var(--surface-inverse-primary); border-color: var(--surface-inverse-primary); }
.sp-radio:checked::after { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--typography-inverse-primary); }
.sp-radio:checked:hover { background: var(--surface-inverse-hover); }
.sp-radio:disabled { pointer-events: none; opacity: 0.5; background: var(--surface-tertiary); border-color: transparent; }

/* Choice rows */
.sp-choice { display: inline-flex; align-items: center; gap: var(--space-200); font-size: var(--callout-font-size); line-height: var(--callout-line-height); color: var(--typography-primary); cursor: pointer; }

/* Radio card */
.sp-radio-card {
  display: flex;
  align-items: center;
  gap: var(--space-300);
  min-height: var(--space-1200);
  padding: var(--space-200) var(--space-400);
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius-card-sm);
  background: var(--surface-primary);
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.sp-radio-card:has(.sp-radio:checked) { border-color: var(--surface-inverse-primary); }

/* ---------- Toggle (switch) ---------- */
.sp-toggle {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: var(--space-800);
  height: var(--space-500);
  margin: 0;
  flex-shrink: 0;
  border: 1px solid transparent;
  border-radius: var(--border-radius-full);
  background: var(--surface-tertiary);
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.sp-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 1px;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--white);
  transition: transform 0.15s ease;
}
.sp-toggle:checked { background: var(--surface-inverse-primary); }
.sp-toggle:checked::after { transform: translateY(-50%) translateX(calc(100% - 4px)); }
.sp-toggle:disabled { pointer-events: none; opacity: 0.5; }

/* ---------- Select ---------- */
.sp-select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: var(--space-1000);
  padding: var(--space-200) var(--space-1000) var(--space-200) var(--space-300);
  border: 1px solid var(--border-secondary);
  border-radius: var(--border-radius-input);
  background-color: var(--surface-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234a5565' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m19.92 8.95-6.52 6.52a1.99 1.99 0 0 1-2.8 0L4.08 8.95'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-300) center;
  color: var(--typography-primary);
  font-family: var(--font-sans);
  font-size: var(--callout-font-size);
  line-height: var(--callout-line-height);
  cursor: pointer;
  outline: none;
  transition: box-shadow 0.15s ease;
}
.sp-select:focus { box-shadow: 0 0 0 1px var(--background), 0 0 0 3px var(--border-focused); }
.sp-select:disabled { pointer-events: none; background-color: var(--surface-secondary); color: var(--typography-tertiary); }

/* ---------- Spinner ---------- */
.sp-spinner {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  border: 2px solid color-mix(in srgb, currentColor 25%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: sp-spin 0.7s linear infinite;
}
@keyframes sp-spin { to { transform: rotate(360deg); } }