/*
 * Éclore Aesthetics — Form field primitives (VISUAL-DESIGN §5.10)
 * ─────────────────────────────────────────────────────────────────────────────
 * Generic, reusable field classes so any form inherits the house treatment: a
 * visible label ABOVE the control (never placeholder-as-label), a squared,
 * hairline-bordered input, an inline error that pairs Terracotta with a written
 * message (never colour alone, §8), and a muted hint. The contact page composes
 * these in contact.css; submit buttons reuse .btn--primary (buttons.css).
 *
 * The global compound focus ring (global.css) is inherited on focus — only the
 * border colour is added here, and it is never used to convey state on its own.
 * Motion: only the border colour transitions, gated to non-reduced-motion.
 */

/* ─── Group: label above control, token rhythm between groups ─────────────────── */

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  margin-bottom: var(--space-md);
}

/* ─── Label — Familjen uppercase tracked caps, Ink ───────────────────────────── */

.form-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8125rem;
  line-height: 1.2;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text);
}

.form-label__required {
  color: var(--color-terracotta); /* the single accent marks a required field */
}

/* ─── Controls — squared, hairline border on Bone, Inter Ink body ────────────── */

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: var(--space-xs) var(--space-sm); /* ~12px / 16px (§5.10) */
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-text);
  background: transparent;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-sm);
}

.form-input,
.form-select {
  min-height: 3rem; /* 48px tap target (§5.10) */
}

.form-textarea {
  resize: vertical; /* never horizontal — would break the column measure */
}

/* Focus — border raises to Ink; the compound ring is owned by global.css. */
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--color-ink);
}

/* Disabled — muted text, hairline border held (§5.10 state table). */
.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled {
  color: var(--color-text-muted);
  cursor: not-allowed;
}

/* ─── Error state — Terracotta border PLUS the written message (§8) ──────────── */

.form-group--error .form-input,
.form-group--error .form-select,
.form-group--error .form-textarea {
  border-color: var(--color-terracotta);
}

/* Renders between the label and the control in markup; the group gap spaces it. */
.form-error {
  margin: 0;
  font-size: clamp(0.75rem, 1vw, 0.875rem); /* caption */
  line-height: 1.45;
  color: var(--color-terracotta);
}

/* ─── Consent — squared checkbox + body-copy text on one row ─────────────────── */

/* The label is the click target: checkbox left, wording right, top-aligned so
   multi-line wording stays beside (not under) the box. */
.form-consent__label {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-2xs);
  cursor: pointer;
}

/* Squared, never rounded; Terracotta fills the checked state via accent-color,
   with a hairline holding the unchecked rest. The compound focus ring is
   inherited from global.css — not redefined here. */
.form-consent__input {
  flex: 0 0 auto;
  width: 1.125rem;  /* ~18px */
  height: 1.125rem;
  margin: 0;
  border: 1px solid var(--color-hairline);
  border-radius: 0;
  accent-color: var(--color-terracotta);
  cursor: pointer;
}

/* Wording: Inter body, Ink, readable line-height. */
.form-consent__text {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-text);
}

/* ─── Hint — caption, muted Ink ──────────────────────────────────────────────── */

.form-hint {
  margin: 0;
  font-size: clamp(0.75rem, 1vw, 0.875rem); /* caption */
  line-height: 1.45;
  color: var(--color-text-muted);
}

/* ─── Motion — gate the border transition to non-reduced-motion users ────────── */

@media (prefers-reduced-motion: no-preference) {
  .form-input,
  .form-select,
  .form-textarea {
    transition: border-color var(--dur-micro) var(--ease-standard);
  }
}