:root {
  --navy: #172033;
  --dark: #102b38;
  --green: #087f78;
  --mint: #e6f5f3;
  --paper: #f7f9fc;
  --text: #172033;
  --muted: #64748b;
  --line: #dbe3ef;
  --warm: #edf4f7;
  --shadow: 0 10px 25px rgb(15 23 42 / 10%);
  --color-primary: var(--green);
  --color-secondary: var(--dark);
  --color-accent: var(--mint);
  --color-bg: var(--paper);
  --color-surface: #fff;
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-border: var(--line);
  --color-on-primary: #fff;
  --color-header-bg: rgb(255 255 255 / 94%);
  --color-footer-muted: #d7e3e8;
  --color-overlay: rgb(255 255 255 / 9%);
  --font-family: Arial, Helvetica, sans-serif;
  --font-size-base: 1rem;
  --font-size-heading: clamp(2rem, 5vw, 4rem);
  color: var(--text);
  background: var(--paper);
  font: 16px/1.5 Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }

html { min-height: 100%; }

body {
  margin: 0;
  color: var(--text);
  background: var(--paper);
}

img { max-width: 100%; }

button, input, select, textarea { font: inherit; }

button, summary { cursor: pointer; }

a { color: inherit; }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid rgb(8 127 120 / 24%);
  outline-offset: 2px;
}