/* Base layer: variables, resets and typography for Whalet Checkout */
:root {
  --whalet-spacing-xxs: 0.25rem;
  --whalet-spacing-xs: 0.5rem;
  --whalet-spacing-sm: 0.75rem;
  --whalet-spacing-md: 1rem;
  --whalet-spacing-lg: 1.5rem;
  --whalet-spacing-xl: 2rem;

  --whalet-radius-sm: 0.375rem;
  --whalet-radius-md: 0.5rem;
  --whalet-radius-lg: 0.75rem;

  --whalet-color-bg: #ffffff;
  --whalet-color-bg-soft: #fafafa;
  --whalet-color-border: #eeeeee;
  --whalet-color-text: #111111;
  --whalet-color-text-muted: #666666;
}

.whalet-checkout {
  box-sizing: border-box;
  color: var(--whalet-color-text);
  font-size: 1rem;
  line-height: 1.5;
}

.whalet-checkout *,
.whalet-checkout *::before,
.whalet-checkout *::after {
  box-sizing: inherit;
}

.whalet-checkout h3 {
  margin: 0 0 var(--whalet-spacing-sm);
  font-size: 1rem;
  font-weight: 600;
}

/* Accessible tap targets inside checkout */
.whalet-checkout button,
.whalet-checkout .button,
.whalet-checkout input[type="submit"],
.whalet-checkout a.button {
  min-width: 3rem;
  min-height: 3rem;
}

/* Media query breakpoints */
@media (max-width: 30rem) { /* <=480px mobile */ }
@media (min-width: 30.0625rem) and (max-width: 48rem) { /* 481-768px tablet */ }
@media (min-width: 48.0625rem) { /* >=769px desktop */ }