/* ============================================================
   input.css — design system v0 — composant input
   Owner: xilrian-agent (XA) · 2026-05-11
   ============================================================
   Composants form generic : text input, textarea, label, validation
   states. Convention `.ds-input`, `.ds-textarea`, `.ds-form-label`,
   `.ds-form-help`, `.ds-form-error`. Tailles : `.ds-input--sm`,
   default, `.ds-input--lg`. Modifiers : `.ds-input--full-width`,
   `.ds-input--invalid`.

   Premier consumer documenté : chatbot-web (Phase 1, chat input
   message). Aussi prévu : V0 Tier 3 forms futurs, AP login pages
   refactor (login form + email/password fields). Cohérent
   `.ds-button` (button.css).
   ============================================================ */

/* ----- Base text input ----- */
.ds-input,
.ds-textarea {
  display: inline-block;
  padding: var(--ds-space-2) var(--ds-space-3);
  border: var(--ds-border-width-1) solid var(--surface-color-rule, #d4d4d8);
  border-radius: var(--ds-radius-base);
  background-color: var(--surface-color-input-bg, var(--surface-color-bg, #fff));
  color: var(--surface-color-text, currentColor);
  font-family: inherit;
  font-size: var(--ds-font-size-base);
  line-height: var(--ds-line-height-normal);
  transition: border-color var(--ds-transition-fast),
              box-shadow var(--ds-transition-fast),
              background-color var(--ds-transition-fast);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.ds-input::placeholder,
.ds-textarea::placeholder {
  color: var(--surface-color-text-muted, #71717a);
  opacity: 1;
}

.ds-input:hover:not(:disabled),
.ds-textarea:hover:not(:disabled) {
  border-color: var(--surface-color-rule-hover, var(--surface-color-primary, #71717a));
}

.ds-input:focus,
.ds-textarea:focus {
  outline: none;
  border-color: var(--surface-color-primary, #1a1a1a);
  box-shadow: 0 0 0 var(--ds-border-width-2)
              var(--surface-color-primary-focus-ring,
                   color-mix(in srgb, var(--surface-color-primary, #1a1a1a) 25%, transparent));
}

.ds-input:disabled,
.ds-textarea:disabled,
.ds-input[aria-disabled="true"],
.ds-textarea[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: var(--surface-color-input-disabled-bg,
                         color-mix(in srgb, var(--surface-color-rule, #d4d4d8) 30%, transparent));
}

/* ----- Textarea-specific ----- */
.ds-textarea {
  display: block;
  width: 100%;
  min-height: calc(var(--ds-line-height-normal) * 3em + var(--ds-space-4));
  resize: vertical;
}

/* ----- Sizes ----- */
.ds-input--sm,
.ds-textarea--sm {
  padding: var(--ds-space-1) var(--ds-space-2);
  font-size: var(--ds-font-size-sm);
}

.ds-input--lg,
.ds-textarea--lg {
  padding: var(--ds-space-3) var(--ds-space-4);
  font-size: var(--ds-font-size-lg);
}

/* ----- Modifiers ----- */
.ds-input--full-width,
.ds-textarea--full-width {
  display: block;
  width: 100%;
}

/* ----- Validation states ----- */
.ds-input--invalid,
.ds-textarea--invalid,
.ds-input[aria-invalid="true"],
.ds-textarea[aria-invalid="true"] {
  border-color: var(--surface-color-error, #dc2626);
}

.ds-input--invalid:focus,
.ds-textarea--invalid:focus,
.ds-input[aria-invalid="true"]:focus,
.ds-textarea[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 var(--ds-border-width-2)
              color-mix(in srgb, var(--surface-color-error, #dc2626) 25%, transparent);
}

.ds-input--valid,
.ds-textarea--valid {
  border-color: var(--surface-color-success, #16a34a);
}

.ds-input--valid:focus,
.ds-textarea--valid:focus {
  box-shadow: 0 0 0 var(--ds-border-width-2)
              color-mix(in srgb, var(--surface-color-success, #16a34a) 25%, transparent);
}

/* ============================================================
   Form labels, help text, error text
   ============================================================ */

.ds-form-label {
  display: block;
  margin-bottom: var(--ds-space-1);
  font-size: var(--ds-font-size-sm);
  font-weight: var(--ds-font-weight-medium);
  color: var(--surface-color-text, currentColor);
}

.ds-form-label--required::after {
  content: " *";
  color: var(--surface-color-error, #dc2626);
}

.ds-form-help {
  display: block;
  margin-top: var(--ds-space-1);
  font-size: var(--ds-font-size-sm);
  color: var(--surface-color-text-muted, #71717a);
}

.ds-form-error {
  display: block;
  margin-top: var(--ds-space-1);
  font-size: var(--ds-font-size-sm);
  color: var(--surface-color-error, #dc2626);
}

/* ============================================================
   Form field wrapper (optionnel mais utile pour groups)
   ============================================================ */

.ds-form-field {
  display: block;
  margin-bottom: var(--ds-space-4);
}

.ds-form-field:last-child {
  margin-bottom: 0;
}

/* ============================================================
   Variables sémantiques utilisées (surchargeables par agent)
   ============================================================
   --surface-color-rule          : couleur bordure par défaut
   --surface-color-rule-hover    : couleur bordure hover
   --surface-color-input-bg      : couleur fond input (= surface-color-bg fallback)
   --surface-color-input-disabled-bg : fond input disabled
   --surface-color-text          : couleur texte input
   --surface-color-text-muted    : couleur placeholder + help text
   --surface-color-primary       : couleur focus + boutons
   --surface-color-primary-focus-ring : ring focus (auto-derived via color-mix())
   --surface-color-error         : couleur invalid state + error text + label required asterisk
   --surface-color-success       : couleur valid state
   ============================================================ */