/* @mattfinkel/common-web v0.2 visual foundation. Static consumers vendor this
   release output unchanged; React consumers import the package export. */
:root {
  --cw-space-1: 0.25rem;
  --cw-space-2: 0.5rem;
  --cw-space-3: 0.75rem;
  --cw-space-4: 1rem;
  --cw-space-5: 1.5rem;
  --cw-space-6: 2rem;
  --cw-radius-sm: 0.5rem;
  --cw-radius-md: 0.875rem;
  --cw-radius-lg: 1.25rem;
  --cw-control-height: 2.75rem;
  --cw-focus: #8ab4f8;
  --cw-danger: #ef6a6a;
  --cw-success: #65c18c;
  --cw-warning: #e8b44f;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; padding-bottom: env(safe-area-inset-bottom); }
button, input, select, textarea { font: inherit; }
button, [role="button"], input, select, textarea { min-height: var(--cw-control-height); }
button, [role="button"] { touch-action: manipulation; }
:focus-visible { outline: 3px solid var(--cw-focus); outline-offset: 3px; }

.cw-button,
.cw-icon-button {
  align-items: center;
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  border-radius: var(--cw-radius-sm);
  cursor: pointer;
  display: inline-flex;
  font-weight: 700;
  gap: var(--cw-space-2);
  justify-content: center;
  min-height: var(--cw-control-height);
  padding: 0.65rem 1rem;
}
.cw-button:disabled, .cw-icon-button:disabled { cursor: not-allowed; opacity: 0.55; }
.cw-icon-button { aspect-ratio: 1; padding: 0.65rem; }
.cw-notice, .cw-state-panel {
  border: 1px solid color-mix(in srgb, currentColor 24%, transparent);
  border-radius: var(--cw-radius-md);
  padding: var(--cw-space-4);
}
.cw-notice[data-tone="danger"] { border-color: var(--cw-danger); }
.cw-notice[data-tone="success"] { border-color: var(--cw-success); }
.cw-notice[data-tone="warning"] { border-color: var(--cw-warning); }
.cw-section-heading { margin-block: 0 var(--cw-space-4); }
.cw-section-heading > :is(h1, h2, h3) { margin: 0; }
.cw-section-heading > p, .cw-state-panel > p { margin: var(--cw-space-2) 0 0; }
.cw-state-panel { text-align: center; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}