@layer components {
  /* Shared input styles */
  .input,
  .textarea,
  .select {
    --input-bg: var(--color-canvas);
    --input-border: var(--border);
    --input-radius: var(--radius);
    --input-padding: var(--block-space-half) var(--inline-space);

    background-color: var(--input-bg);
    border: var(--input-border);
    border-radius: var(--input-radius);
    color: var(--color-ink);
    font-size: var(--text-normal);
    inline-size: 100%;
    padding: var(--input-padding);
    transition: border-color var(--transition-fast);
  }

  .input:focus,
  .textarea:focus,
  .select:focus {
    border-color: var(--color-link);
    outline: none;
    box-shadow: 0 0 0 2px oklch(var(--lch-link) / 0.2);
  }

  .input::placeholder,
  .textarea::placeholder {
    color: var(--color-ink-muted);
  }

  /* Textarea */
  .textarea {
    min-height: 6rem;
    resize: vertical;
    line-height: var(--line-height);
  }

  /* Select */
  .select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--inline-space) center;
    padding-inline-end: calc(var(--inline-space) * 3);
  }

  [data-theme="dark"] .select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23aaa' stroke-width='2'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .select {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23aaa' stroke-width='2'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
    }
  }

  /* Label */
  .label {
    color: var(--color-ink);
    display: block;
    font-size: var(--text-small);
    font-weight: 600;
    margin-block-end: var(--block-space-half);
  }

  .label--optional::after {
    content: " (optional)";
    font-weight: 400;
    color: var(--color-ink-muted);
  }

  /* Field group (label + input + hint) */
  .field {
    margin-block-end: var(--block-space);
  }

  .field__hint {
    color: var(--color-ink-muted);
    font-size: var(--text-xs);
    margin-block-start: var(--block-space-half);
  }

  .field__error {
    color: var(--color-negative);
    font-size: var(--text-xs);
    margin-block-start: var(--block-space-half);
  }

  /* Error state on inputs */
  .input--error,
  .textarea--error,
  .select--error {
    border-color: var(--color-negative);
  }
}