/* ============================================================
   MOVA design tokens — bridge to PropAtlas UI kit
   Spec: data/ui_kit/pa-controls.standard.json
   Rule: shared control metrics + brand gold; MOVA keeps
   marketing navy scale, Manrope/Fraunces, pill CTAs, layout.
   ============================================================ */

:root {
  /* —— Shared with PropAtlas UI kit (controls contract) —— */
  --touch-min: 44px;                 /* pa-ctrl-h — Default density */
  --touch-min-sm: 36px;              /* pa-ctrl-h-sm / Compact control height */
  --touch-font: 16px;               /* iOS zoom guard on public forms */
  --radius-ctrl: 12px;               /* pa-ctrl-radius — fields / compact controls */
  --radius-pill: 999px;              /* MOVA CTA language (kit uses 12 on pa-btn) */
  --kit-navy: #001640;               /* pa-ctrl-navy — reference; not site surfaces */
  --kit-gold: #c9a35a;               /* pa-ctrl-gold */
  --kit-blue: #1767e8;               /* pa-ctrl-blue — focus / links sparingly */

  /* —— MOVA brand surfaces (marketing site — do not CRM-ify) —— */
  --navy-900: #0a1830;
  --navy-800: #0f2445;
  --navy-700: #16305a;
  --navy-600: #1d3d70;
  --gold: var(--kit-gold);           /* aligned to kit */
  --gold-bright: #e0b85a;            /* legacy CTA glow / gradients */
  --gold-soft: #f5e6c8;
  --gold-tint: rgba(201, 163, 90, 0.22);
  --ink: #0b1220;
  --text: #23304a;
  --muted: #475569;
  --line: #d8dee8;
  --bg: #ffffff;
  --bg-soft: #f0f4fa;
  --card: #ffffff;
  --radius: 20px;                    /* cards / shells (kit pa-kit-stage also 20) */
  --radius-sm: var(--radius-ctrl);
  --shadow-sm: 0 2px 10px rgba(15, 36, 69, 0.06);
  --shadow: 0 18px 50px rgba(15, 36, 69, 0.12);
  --shadow-lg: 0 30px 80px rgba(10, 24, 48, 0.28);
  --shadow-focus: 0 0 0 3px rgba(23, 103, 232, 0.18);
  --maxw: 1180px;
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Fraunces", Georgia, serif;
  --brand-display: "Canela Display", "Fraunces", Georgia, serif;

  /* Widget shell */
  --mova-widget-radius: var(--radius);
  --mova-widget-head-bg: linear-gradient(135deg, var(--navy-800) 0%, var(--navy-600) 100%);
  --mova-widget-shadow: 0 12px 40px rgba(10, 24, 48, 0.1);
  --mova-header-h: 64px;
}

/* —— Touch + control floor (components stay MOVA-styled) —— */
.btn {
  min-height: var(--touch-min);
  border-radius: var(--radius-pill);
  box-sizing: border-box;
}
.btn-lg {
  min-height: calc(var(--touch-min) + 6px);
}
.btn-sm {
  min-height: var(--touch-min-sm);
}

.nav-toggle {
  min-width: var(--touch-min);
  min-height: var(--touch-min);
}

.lang-btn {
  min-height: var(--touch-min-sm);
}

/* Form controls — kit height + radius; MOVA chrome */
.wiz-input,
select.wiz-input,
textarea.wiz-input,
.wiz-input-suffix input,
.wiz-phone input,
.wiz-phone select,
.lf-field input,
.lf-field select,
.lf-field textarea,
.footer-news-form input,
.elig-widget input,
.elig-widget select,
.elig-widget textarea,
.page-spoke input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.page-spoke select,
.page-spoke textarea {
  min-height: var(--touch-min);
  border-radius: var(--radius-ctrl);
  font-size: var(--touch-font, 16px); /* iOS zoom guard */
  box-sizing: border-box;
}

/* Compact density (UI Kit parity) — opt-in on tool shells; public Default stays 44px */
.mova-widget.pa-density--compact,
.elig-widget.pa-density--compact,
.hf-wizard.pa-density--compact {
  --touch-min: 36px;
  --touch-min-sm: 30px;
  --touch-font: 13px;
  --radius-ctrl: 10px;
}

textarea.wiz-input,
.lf-field textarea,
.page-spoke textarea {
  min-height: calc(var(--touch-min) * 2.5);
}

.wiz-input:focus,
select.wiz-input:focus,
.lf-field input:focus,
.lf-field select:focus,
.elig-widget input:focus,
.elig-widget select:focus {
  outline: none;
  border-color: var(--kit-blue);
  box-shadow: var(--shadow-focus);
}

/* Wizard step7 had 38px fields — lift to touch floor */
.hf-panel__content--step7 .wiz-input,
.hf-panel__content--step7 select.wiz-input,
.hf-panel__content--step7 .wiz-phone {
  min-height: var(--touch-min) !important;
}

.hf-wizard--holo .hf-btn-next,
.hf-wizard--holo .hf-btn-back,
.hf-wizard--holo #hfRestart {
  min-height: var(--touch-min);
}

/* Checkbox / radio hit area */
input[type="checkbox"],
input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--gold);
}