/* ============================================
   Forms Component - BEM
   ============================================ */
@layer components {
  /* Block: form */
  form {
    max-width: 600px;
  }

  form > div {
    margin-bottom: var(--space-lg);
  }

  /* Form elements */
  label {
    display: block;
    font-weight: 500;
    margin-bottom: var(--space-xs);
    color: var(--color-text);
  }

  /* Block: input (text-based inputs) */
  input[type="text"],
  input[type="url"],
  input[type="email"],
  input[type="password"],
  input[type="datetime-local"],
  input[type="date"],
  input[type="time"],
  input[type="number"],
  textarea,
  select {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-size-base);
    font-family: var(--font-sans);
    color: var(--color-text);
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  }

  input[type="text"]:focus,
  input[type="url"]:focus,
  input[type="email"]:focus,
  input[type="password"]:focus,
  input[type="datetime-local"]:focus,
  input[type="date"]:focus,
  input[type="time"]:focus,
  input[type="number"]:focus,
  textarea:focus,
  select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgb(59 130 246 / 0.1);
  }

  input[type="text"]::placeholder,
  input[type="url"]::placeholder,
  input[type="email"]::placeholder,
  input[type="password"]::placeholder,
  textarea::placeholder {
    color: var(--color-text-muted);
  }

  textarea {
    min-height: 100px;
    resize: vertical;
  }
}