/* Venvy design tokens + shared accessible form primitives.
   Loaded by every merchant-facing page (home, onboarding, dashboard, legal, fees, 404).
   Colour pairs used for text are WCAG AA (>= 4.5:1) on white and on --surface:
     --green-d on white 6.1:1 · --muted on white 5.7:1 · --red on white 6.6:1
   --green (#1B8C7D) is 4.1:1 on white: use it for decoration, icons and large text only. */

:root {
  /* Brand */
  --green: #1B8C7D;
  --green-d: #136E62;
  --green-deep: #0c4a43;
  --green-pale: #E5F4F2;
  --wa-green: #25D366;
  --wa-d: #128C7E;
  --wa: #1B8C7D;

  /* Neutrals */
  --surface: #F5F4F1;
  --card: #ffffff;
  --border: #DDE1DF;
  --border-strong: #8a9a96;
  --text: #1A2744;
  --muted: #586878;

  /* Feedback */
  --accent: #E05A4A;
  --accent-pale: #FDECEA;
  --amber: #f59e0b;
  --amber-pale: #fef3c7;
  --amber-text: #8a4b06;
  --red: #b42318;
  --red-pale: #fef2f2;
  --blue-text: #1d4ed8;
  --blue-pale: #eff6ff;
  --focus-ring: #0b57d0;

  /* Shape */
  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 2px 10px rgba(0,0,0,.05), 0 8px 32px rgba(0,0,0,.04);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06);
  --shadow-md: 0 10px 40px rgba(8,24,17,.08);
  --shadow-lg: 0 20px 60px rgba(0,0,0,.12), 0 4px 16px rgba(0,0,0,.06);

  /* Type */
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "Syne", "DM Sans", system-ui, sans-serif;

  /* Touch */
  --tap: 44px;
}

/* ── Accessibility helpers ─────────────────────────────────────────────── */
.v-sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.v-skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 10000;
  background: var(--text); color: #fff; padding: 12px 16px; border-radius: var(--radius-sm);
  font-weight: 700; text-decoration: none; transition: top .15s;
}
.v-skip-link:focus { top: 12px; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Form primitives ───────────────────────────────────────────────────── */
.v-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.v-label { font-size: 14px; font-weight: 600; color: var(--text); }
.v-label .v-optional { font-weight: 400; color: var(--muted); }
.v-hint { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.v-input {
  width: 100%; min-height: var(--tap); padding: 10px 14px;
  border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm);
  font: 16px/1.4 var(--font-body); /* 16px stops iOS zoom on focus */
  color: var(--text); background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.v-input:focus { border-color: var(--green-d); box-shadow: 0 0 0 3px rgba(19,110,98,.18); outline: none; }
.v-input[aria-invalid="true"] { border-color: var(--red); background: #fffafa; }
.v-error { font-size: 13px; color: var(--red); line-height: 1.45; min-height: 0; }
.v-error:empty { display: none; }
.v-error::before { content: "\26A0\FE0E  "; }
.v-error:empty::before { content: none; }

.v-pw-wrap { position: relative; }
.v-pw-wrap .v-input, .v-pw-wrap input { padding-right: 84px; }
.v-pw-toggle {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  min-height: 36px; min-width: 64px; padding: 0 10px;
  border: 0; border-radius: 6px; background: transparent;
  color: var(--green-d); font: 600 13px var(--font-body); cursor: pointer;
}
.v-pw-toggle:hover { background: var(--green-pale); }

.v-check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--text); cursor: pointer; padding: 6px 0; }
.v-check input { width: 22px; height: 22px; margin-top: 1px; flex-shrink: 0; accent-color: var(--green-d); }
.v-check a { color: var(--green-d); font-weight: 600; }

.v-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap); padding: 10px 20px; border-radius: 10px;
  border: 1.5px solid transparent; font: 700 15px var(--font-body);
  text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s;
}
.v-btn:disabled { opacity: .6; cursor: not-allowed; }
.v-btn-primary { background: var(--green-d); border-color: var(--green-d); color: #fff; }
.v-btn-primary:hover:not(:disabled) { background: var(--green-deep); border-color: var(--green-deep); }
.v-btn-ghost { background: #fff; border-color: var(--border-strong); color: var(--text); }
.v-btn-ghost:hover:not(:disabled) { background: var(--surface); }
.v-btn-block { width: 100%; }
.v-link-btn { background: none; border: 0; padding: 8px 2px; min-height: var(--tap); color: var(--green-d); font: 600 14px var(--font-body); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

.v-status { border-radius: 10px; padding: 12px 14px; font-size: 14px; line-height: 1.55; }
.v-status:empty { display: none; }
.v-status-info { background: var(--blue-pale); color: var(--blue-text); border: 1px solid #bfdbfe; }
.v-status-ok { background: var(--green-pale); color: var(--green-deep); border: 1px solid #a7d8cf; }
.v-status-error { background: var(--red-pale); color: var(--red); border: 1px solid #f3c7c7; }

.v-spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; border-radius: 50%; animation: v-spin .8s linear infinite; vertical-align: -3px; }
@keyframes v-spin { to { transform: rotate(360deg); } }

/* Logo link at the top of simple content pages (terms, privacy, fees). */
.page-logo { display: flex; width: max-content; align-items: center; min-height: var(--tap); margin-bottom: 4px; }
.page-logo img { display: block; height: 32px; width: auto; }