:root {
  /* Define the variable here */
  --form-border-color: #949494;
}

/* Form inputs, selects, textareas — visible border */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="file"],
select,
textarea {
  border: 1px solid var(--form-border-color) !important; /* ~5.9:1 on white */
  border-radius: 3px;
}

/* Checkboxes and radios */
/* input[type="checkbox"],
input[type="radio"] {
  outline: 1px solid var(--form-border-color);
  outline-offset: 1px;
} */

/* Buttons — ensure visible boundary */
button,
input[type="submit"],
input[type="reset"],
input[type="button"],
.btn,
a.btn {
  border: 1px solid var(--form-border-color) !important;
}

/* If your buttons already have a dark background, override to use their own bg as boundary: */
button[style*="background"],
input[type="submit"][style*="background"] {
  border-color: currentColor !important;
}

/* Accessibility Helpers - Skiplink - brought over before other formatting to ensure invisibility of ADA only objects */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #003366;
    color: white;
    padding: 8px;
    z-index: 1000;
    text-decoration: none;
}

.skip-link:focus {
    top: 0;
    width: auto;
    height: auto;
    clip: auto;
    margin: 0;
    position: absolute;
}