@font-face {
  font-family: "Cambon";
  src: url("fonts/Cambon-Light.ttf") format("truetype");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: "TT Norms Pro";
  src: url("fonts/TTNormsProVariable.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "TT Norms Pro Mono";
  src: url("fonts/TTNormsProMono-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "TT Norms Pro Mono";
  src: url("fonts/TTNormsProMono-DemiBold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

:root {
  --color-midnight: #011043;
  --color-midnight-600: #192656;
  --color-midnight-700: #253260;
  --color-sage: #c6d3ad;
  --color-sage-50: #f9fbf7;
  --color-sage-100: #e7eddc;
  --color-heron: #d9dee1;
  --color-ice: #c5ddef;
  --color-ice-100: #e4f2fe;
  --color-white: #ffffff;
  --color-black: #0b0c0c;
  --color-cobalt: #408df1;
}

.bg-green {
  background-color: var(--color-sage);
}

.bg-amber {
  background-color: var(--color-cobalt);
}

body {
  font-family: "TT Norms Pro", monospace;
  font-weight: 400;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Cambon", serif !important;
  font-weight: 300 !important;
}

strong,
b,
button,
label {
  font-weight: 600;
}

::selection {
  color: var(--color-white);
  background-color: var(--color-midnight);
}

.custom-checkbox:checked + div,
.custom-radio:checked + div,
.branch-card:checked + div {
  border-color: var(--color-midnight);
  background-color: var(--color-ice-100);
}

.branch-card:checked + div {
  box-shadow: 0 4px 6px -1px rgb(1 16 67 / 15%), 0 2px 4px -1px rgb(1 16 67 / 10%);
}

.custom-checkbox:focus-visible + div,
.custom-radio:focus-visible + div,
.branch-card:focus-visible + div {
  outline: 2px solid var(--color-cobalt);
  outline-offset: 2px;
}