:root {
  --gringo-blue: #254e87;
  --gringo-blue-dark: #004e87;
  --gringo-blue-light: #02538b;
  --gringo-cyan: #00afec;
  --gringo-cyan-alt: #02b0e6;
  --gringo-cyan-dark: #00a2db;
  --gringo-text: #1f1f1f;
  --gringo-text-soft: #2b2b2b;
  --gringo-white: #ffffff;
}

body {
  font-family: "Open Sans", "Segoe UI", sans-serif;
  color: var(--gringo-text);
}

h1,
h2,
h3,
.landing-hero-copy h1,
.lookup-card h2,
.confirm-head h1,
.vehicle-page-title,
.vehicle-section h2,
.vehicle-services h2,
.pm-title,
.pay-card h2,
.boleto-header h2,
.receipt-thanks h1,
.receipt-card h2 {
  font-family: "fieldwork", "Open Sans", sans-serif;
  font-weight: 500;
}

p,
small,
a,
span,
li,
button,
input,
textarea,
label {
  font-family: "Open Sans", "Segoe UI", sans-serif;
}

.landing-nav,
.confirm-shell,
.result-shell,
.pm-page,
.receipt-shell {
  background: #ffffff;
}

.landing-hero {
  background: linear-gradient(145deg, var(--gringo-blue) 0%, var(--gringo-blue-dark) 100%);
}

.landing-submit,
.confirm-btn,
.btn-primary {
  background: linear-gradient(90deg, var(--gringo-cyan) 0%, var(--gringo-cyan-alt) 100%);
  color: var(--gringo-white);
}

.btn-primary:hover,
.landing-submit:hover,
.confirm-btn:hover {
  background: linear-gradient(90deg, var(--gringo-cyan-dark) 0%, var(--gringo-cyan) 100%);
}

.btn-secondary {
  background: #e6f4ff;
  color: var(--gringo-blue-dark);
}

.field-label,
.confirm-fields .field-label,
.lookup-card .field-label {
  color: var(--gringo-text);
  font-size: 14px;
  font-weight: 700;
}

.lookup-card h2 {
  font-size: clamp(1.6rem, 3.2vw, 2rem);
  line-height: 1.25;
}

.lookup-sub,
.lookup-hint,
.confirm-head p,
.result-sub,
.status,
.boleto-footnote,
.receipt-thanks p {
  color: var(--gringo-text-soft);
}

input,
textarea,
select {
  border-radius: 10px;
}

.confirm-avatar {
  background: var(--gringo-cyan);
  color: var(--gringo-white);
}

.vehicle-pay-btn,
.pm-continue,
.boleto-copy-btn {
  background: linear-gradient(145deg, #1f2a3f 0%, #111927 100%);
  color: #ffffff;
}

.pm-progress-track span,
.boleto-stage-chip,
.vehicle-coupon-banner,
.pm-coupon {
  background: #baf0fb;
  color: #154467;
}

.pm-option.is-selected,
.vehicle-debt-item {
  border-color: #c9d3e3;
}

.boleto-header,
.receipt-thanks {
  background: linear-gradient(180deg, var(--gringo-blue-dark) 0%, var(--gringo-blue) 100%);
}

@media (max-width: 768px) {
  .landing-hero-copy h1,
  .confirm-head h1,
  .vehicle-page-title,
  .pm-title,
  .boleto-header h2 {
    font-size: clamp(1.9rem, 8vw, 2.2rem);
  }
}