/* Somatro form fields — ONE shared style for every input, select and textarea (task 1.48).
   Dark navy site only; there is no light theme. New tokens, defined once here; the frozen design-system
   files are untouched. The field's own inline `background: var(--surface-input)` and
   `border: 1px solid var(--border-soft)` pick the new look up through the two custom properties
   re-pointed below, so no page needs a one-off field background or an !important override.

   Contrast (WCAG 2.x), measured against the page surfaces the fields sit on (#070a16 canvas, #131b33 card):
     border     #74809b   4.98:1 on canvas, 4.30:1 on card   (needs 3:1)
     typed text #eef2f8  13.40:1 on the field                (needs 4.5:1)
     placeholder #9aa6bd  6.14:1 on the field                (needs 4.5:1)
     focus ring #12b5c9   7.97:1 on canvas, 6.08:1 on field  (needs 3:1)
     error border #f0384b 3.85:1 on the field                (needs 3:1) */
:root {
  --field-bg: var(--sa-navy-600, #1b2544);        /* one step above the card surface, same navy hue */
  --field-bg-disabled: #10162b;                   /* dimmer than the field, still apart from the page */
  --field-border: #74809b;
  --field-border-disabled: #3a4258;
  --field-text: var(--text-primary, #eef2f8);
  --field-placeholder: #9aa6bd;
  --field-border-focus: var(--accent-focus, #12b5c9);
  --field-border-error: var(--status-error, #f0384b);
}

input:where(:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"])),
select,
textarea {
  --surface-input: var(--field-bg);
  --border-soft: var(--field-border);
  background-color: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: var(--radius-md);
  color: var(--field-text);
  caret-color: var(--field-border-focus);
  box-sizing: border-box;
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
input::placeholder, textarea::placeholder { color: var(--field-placeholder); opacity: 1; }

input:where(:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"])):hover,
select:hover, textarea:hover { --border-soft: var(--field-border); border-color: #8a95b0; }

/* Keyboard and TV-remote focus: the site's accent ring plus an accent border. */
input:focus-visible, select:focus-visible, textarea:focus-visible,
input[type="file"]:focus-visible {
  --border-soft: var(--field-border-focus);
  outline: none;
  border-color: var(--field-border-focus);
  box-shadow: var(--focus-ring);
}

/* Error: the pages show a role="alert" message right after the field, or set aria-invalid. */
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"],
input:has(+ [role="alert"]), input:has(+ sc-if > [role="alert"]),
select:has(+ [role="alert"]), textarea:has(+ [role="alert"]) {
  --border-soft: var(--field-border-error);
  border-color: var(--field-border-error);
}
input[aria-invalid="true"]:focus-visible, input:has(+ [role="alert"]):focus-visible, input:has(+ sc-if > [role="alert"]):focus-visible,
select[aria-invalid="true"]:focus-visible, textarea[aria-invalid="true"]:focus-visible {
  --border-soft: var(--field-border-error);
  border-color: var(--field-border-error);
}

/* Disabled: visibly dimmer, no hover or pointer. */
input:disabled, select:disabled, textarea:disabled {
  --surface-input: var(--field-bg-disabled);
  --border-soft: var(--field-border-disabled);
  background-color: var(--field-bg-disabled);
  border-color: var(--field-border-disabled);
  color: var(--text-muted, #5c6577);
  -webkit-text-fill-color: var(--text-muted, #5c6577);
  opacity: .7;
  cursor: not-allowed;
}
input:disabled::placeholder, textarea:disabled::placeholder { color: var(--text-muted, #5c6577); }

select option { background: var(--sa-navy-850, #0a0e1e); color: var(--text-primary); }

/* File pickers: the native control plus a button styled to match the fields. */
input[type="file"] {
  color: var(--text-tertiary); font: var(--weight-regular) 14px/1.4 var(--font-ui);
  background: var(--field-bg); border: 1px solid var(--field-border); border-radius: var(--radius-md);
  padding: 6px; box-sizing: border-box;
}
input[type="file"]::file-selector-button {
  margin-right: 14px; height: 44px; padding: 0 16px; border-radius: var(--radius-md);
  border: 1px solid var(--field-border); background: var(--surface-3); color: var(--text-primary);
  font: var(--weight-semibold) 14px/1 var(--font-ui); cursor: pointer;
}
input[type="file"]:disabled { opacity: .5; cursor: not-allowed; }