:root {
  --ink: #17345f;
  --green: #009f57;
  --lime: #14b866;
  --mist: #eef5fb;
  --line: #cbd9e8;
}

body {
  background: #f2f6fb;
  color: var(--ink);
}

header {
  background: #07589f;
  border-bottom: 4px solid #00a45a;
  box-shadow: 0 4px 18px rgb(20 54 101 / 22%);
}

.brand small {
  color: #dcecff;
}

.ghost {
  border-color: rgb(255 255 255 / 58%);
}

.ghost:hover,
.ghost:focus-visible {
  background: rgb(255 255 255 / 12%);
}

.eyebrow {
  color: #5268ad;
}

.intro > p:last-child,
.hint,
.record small,
.privacy {
  color: #5c718a;
}

.card,
.record,
.proof {
  border-color: #d3dfec;
  box-shadow: 0 5px 18px rgb(23 52 95 / 8%);
}

.card h2 span {
  background: #5268ad;
}

label {
  color: #304e74;
}

input,
select {
  border-color: #b8c9db;
  color: #17345f;
}

input:focus,
select:focus {
  outline-color: #b9e8cf;
  border-color: #009f57;
}

.camera {
  border-color: #6da5ce;
  background: #f1f7fc;
}

.camera:hover,
.camera:focus-within {
  border-color: #009f57;
  background: #edf9f3;
}

.location {
  background: #e8f5ee;
  color: #087644;
  border-left: 4px solid #00a45a;
}

.submit {
  background: #00a45a;
  color: #fff;
  box-shadow: 0 5px 0 #087943;
}

.submit:hover,
.submit:focus-visible {
  background: #078b4e;
}

.tick {
  background: #00a45a;
  color: #fff;
}

.export {
  border-color: #07589f;
  color: #07589f;
}

.ghost.dark {
  color: #17345f;
  border-color: #9eb1c6;
}