/* ═══════════════════════════════════════════════════════════════
   Topline — global text field consistency

   PURPOSE
   - Gives text inputs and textareas one consistent surface site-wide.
   - Uses existing site/theme variables, so default, dark mode, and every
     seasonal/site theme update automatically.
   - Does NOT restyle or replace <select> controls.
   - Does NOT touch checkboxes, radios, buttons, file inputs, ranges, etc.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* These aliases intentionally point at existing theme tokens.
     Any theme that changes --cream2 / --charcoal / --border / --muted /
     --sage automatically changes the fields too. */
  --input-bg: var(--cream2, var(--cream, #fdfaf5));
  --input-text: var(--charcoal, #1e2420);
  --input-border: var(--border-dark, rgba(30, 36, 32, 0.12));
  --input-placeholder: var(--muted, #7a8570);
  --input-focus: var(--sage, #6b7c5e);
  --input-disabled-bg: var(--parchment, #f7f3ec);
  --input-disabled-text: var(--muted, #7a8570);
}

/* Text-like controls only. Keep sizing/radius/padding from the page/component;
   this layer only normalizes the theme-sensitive visual colors. */
body input:not([type]),
body input[type="text"],
body input[type="email"],
body input[type="password"],
body input[type="search"],
body input[type="url"],
body input[type="tel"],
body input[type="number"],
body input[type="date"],
body input[type="datetime-local"],
body input[type="month"],
body input[type="week"],
body input[type="time"],
body textarea,
body .form-input,
body .form-textarea {
  background-color: var(--input-bg) !important;
  color: var(--input-text) !important;
  border-color: var(--input-border) !important;
}

body input:not([type])::placeholder,
body input[type="text"]::placeholder,
body input[type="email"]::placeholder,
body input[type="password"]::placeholder,
body input[type="search"]::placeholder,
body input[type="url"]::placeholder,
body input[type="tel"]::placeholder,
body input[type="number"]::placeholder,
body textarea::placeholder,
body .form-input::placeholder,
body .form-textarea::placeholder {
  color: var(--input-placeholder) !important;
  opacity: .7;
}

body input:not([type]):focus,
body input[type="text"]:focus,
body input[type="email"]:focus,
body input[type="password"]:focus,
body input[type="search"]:focus,
body input[type="url"]:focus,
body input[type="tel"]:focus,
body input[type="number"]:focus,
body input[type="date"]:focus,
body input[type="datetime-local"]:focus,
body input[type="month"]:focus,
body input[type="week"]:focus,
body input[type="time"]:focus,
body textarea:focus,
body .form-input:focus,
body .form-textarea:focus {
  border-color: var(--input-focus) !important;
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--input-focus) 15%, transparent);
}

body input:not([type]):disabled,
body input[type="text"]:disabled,
body input[type="email"]:disabled,
body input[type="password"]:disabled,
body input[type="search"]:disabled,
body input[type="url"]:disabled,
body input[type="tel"]:disabled,
body input[type="number"]:disabled,
body input[type="date"]:disabled,
body input[type="datetime-local"]:disabled,
body input[type="month"]:disabled,
body input[type="week"]:disabled,
body input[type="time"]:disabled,
body textarea:disabled,
body .form-input:disabled,
body .form-textarea:disabled {
  background-color: var(--input-disabled-bg) !important;
  color: var(--input-disabled-text) !important;
  cursor: not-allowed;
}

/* Browser autofill can otherwise flash back to white/yellow. */
body input:-webkit-autofill,
body input:-webkit-autofill:hover,
body input:-webkit-autofill:focus,
body textarea:-webkit-autofill,
body textarea:-webkit-autofill:hover,
body textarea:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--input-text) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--input-bg) inset !important;
  caret-color: var(--input-text);
}