@font-face {
  font-family: "Titillium Web";
  src: url("../fonts/Titillium_Web/TitilliumWeb-Regular.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "Titillium Web";
  src: url("../fonts/Titillium_Web/TitilliumWeb-SemiBold.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 600;
}

@font-face {
  font-family: "Titillium Web";
  src: url("../fonts/Titillium_Web/TitilliumWeb-Bold.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 700;
}

@font-face {
  font-family: "Titillium Web";
  src: url("../fonts/Titillium_Web/TitilliumWeb-Italic.woff2") format("woff2");
  font-display: swap;
  font-style: italic;
  font-weight: 400;
}

@font-face {
  font-family: "DM Serif Display";
  src: url("../fonts/DM_Serif_Display/DMSerifDisplay-Regular.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

:root {
  --color-brand-navy: #1d3557;
  --color-brand-blue: #457b9d;
  --color-brand-teal: #a8dadc;
  --color-background: #f0f8ff;

  --color-surface: #ffffff;
  --color-surface-muted: #f0f8ff;
  --color-text: var(--color-brand-navy);
  --color-text-muted: rgb(29 53 87 / 72%);
  --color-border: rgb(29 53 87 / 16%);
  --color-success: #176b45;
  --color-warning: #8a5700;
  --color-danger: #a32929;

  --font-ui: "Titillium Web", "Segoe UI", Arial, sans-serif;
  --font-display: "DM Serif Display", Georgia, "Times New Roman", serif;
  --font-family-body: var(--font-ui);
  --font-family-mono: var(--font-ui);
  --font-size-sm: 0.9375rem;
  --font-size-base: 1.125rem;
  --font-size-lg: 1.375rem;
  --font-size-xl: 2rem;
  --line-height-tight: 1.2;
  --line-height-body: 1.55;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1.25rem;
  --shadow-sm: 0 0.5rem 1.5rem rgb(29 53 87 / 6%);
  --shadow-md: 0 1rem 2.5rem rgb(29 53 87 / 10%);

  --content-max-width: 72rem;
  --focus-color: #0b6e99;
  --focus-ring: 0 0 0 0.2rem var(--color-background), 0 0 0 0.4rem var(--focus-color);
}