/* Global font: Lato */
:root {
  --app-font: "Lato", system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  /* Safe area insets for mobile devices */
  --safe-area-inset-top: env(safe-area-inset-top, 0px);
  --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
  /* UI styling tokens */
  --rms-radius: 0.3125rem;
  --rms-radius-lg: 0.75rem;
  --rms-border: #d1d5db;           /* gray-300 */
  --rms-border-strong: #c5cbd5;    /* gray-300/stronger */
  --rms-bg: #f9fafb;               /* gray-50 */
  --rms-bg-hover: #f3f4f6;         /* gray-100 */
  --rms-text: #111827;             /* gray-900 */
  --rms-text-muted: #6b7280;       /* gray-500 */
  --rms-focus: rgba(14,165,233,0.25); /* light brand focus ring */
}
/* REM scaling baseline: match ~16px at 412px viewport (Pixel 8 Pro) */
html { font-size: clamp(14px, calc(100vw / 25.75), 18px); }
html, body, button, input, select, textarea { font-family: var(--app-font); }
.leaflet-container { font-family: var(--app-font); }

/* App-wide: rounded, subtle inputs and buttons */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="tel"],
textarea,
select {
  border: 0.0625rem solid var(--rms-border);
  border-radius: var(--rms-radius);
  background-color: #fff;
  color: var(--rms-text);
  padding: 0.5rem 0.625rem;
  outline: none;
  box-shadow: none;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
input::placeholder, textarea::placeholder {
  color: var(--rms-text-muted);
  opacity: 1;
}
input:focus,
textarea:focus,
select:focus {
  border-color: #9ca3af; /* gray-400 */
  box-shadow: 0 0 0 0.1875rem var(--rms-focus);
  background-color: #fff;
}

/* Invalid field indicator for required fields */
.invalid {
  border-color: #dc2626 !important; /* red-600 */
  box-shadow: 0 0 0 0.1875rem rgba(220,38,38,0.15) !important;
  background-color: #fff5f5;
}

/* Required marker styling */
.label-prefix { display: inline-flex; align-items: center; gap: 0.1875rem; }
.req-star { color: #dc2626; font-weight: 700; }

/* Buttons: softly rounded and neutral */
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
  border-radius: var(--rms-radius);
  border: 0.0625rem solid var(--rms-border);
  background-color: #fff;
  color: var(--rms-text);
  padding: 0.5rem 0.75rem;
  box-shadow: 0 0.0625rem 0.125rem rgba(0,0,0,0.04);
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .05s ease;
}
button:hover {
  background-color: var(--rms-bg-hover);
  border-color: var(--rms-border-strong);
}
button:active {
  transform: translateY(0.0313rem);
  box-shadow: 0 0 0 rgba(0,0,0,0);
}