:root {
  color-scheme: light dark;

  --navy: #233D6C;
  --navy-light: #244672;
  --navy-mid: #4579B9;
  --carmine: #8F2037;
  --carmine-dark: #7A1A2E;

  --black: #233D6C;
  --black-hover: #16284A;
  --white: #FFFFFF;
  --surface: #FFFFFF;

  --cream: #E6EDF8;
  --gray-100: #F5F8FC;
  --gray-200: #E6EDF8;
  --gray-300: #C6D4EA;
  --gray-500: #6B7C9B;
  --gray-700: #3B4E71;
  --gray-800: #233D6C;

  --blue: #233D6C;
  --blue-hover: #16284A;

  --accent: #8F2037;
  --accent-hover: #7A1A2E;
  --accent-bg: #F8E3E4;

  --green: #245453;
  --green-bg: #E6F1E8;
  --amber: #8A5A00;
  --amber-bg: #FBF0D8;
  --red: #8F2037;
  --info: #233D6C;
  --info-bg: #E6EDF8;

  --radius-sm: 14px;
  --radius-md: 24px;
  --radius-lg: 32px;
  --radius-pill: 999px;

  --font-display: 'Encode Sans Semi Condensed', 'Arial Narrow', Helvetica, sans-serif;
  --font-body: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

h1, h2, h3, .title-display {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 1.06;
}

h1 .accent, h2 .accent, h3 .accent, .title-display .accent {
  color: var(--accent);
}

@media (prefers-color-scheme: dark) {
  :root {
    --black: #E8EEF8;
    --black-hover: #FFFFFF;
    --surface: #131C2E;
    --cream: #1B2740;
    --gray-100: #1A2338;
    --gray-200: #26334E;
    --gray-300: #3A4A6B;
    --gray-500: #94A5C2;
    --gray-700: #C3CFE3;
    --gray-800: #E8EEF8;

    --blue: #7FA4DC;
    --blue-hover: #A3BFE8;

    --accent: #E8899B;
    --accent-hover: #F2A6B4;
    --accent-bg: #3A1C24;

    --green: #7FC9AE;
    --green-bg: rgba(127, 201, 174, 0.14);
    --amber: #E3B457;
    --amber-bg: rgba(227, 180, 87, 0.14);
    --red: #E8899B;
    --info: #7FA4DC;
    --info-bg: rgba(127, 164, 220, 0.14);
  }
}