:root {
  /* sizing */
  --logo-size: 5em;

  /* backgrounds */
  --main-bg: #f3f7fa;
  --surface-bg: #eef4f8;
  --surface-muted: #e0ebf2;
  --surface-hover: #d6e6ef;

  /* header & footer */
  --header-footer-bg: #2e4f63;
  --header-footer-text: #eef4f8;

  /* text */
  --text-primary: #24333d;
  --text-secondary: #5f7483;

  /* buttons */
  --button-primary: #3b6f8f;
  --button-primary-hover: #345f7a;
  --button-primary-text: #ffffff;

  /* links & hover */
  --link: #4f89aa;
  --link-hover: #3b6f8f;

  /* accents */
  --accent: #7fb3c8;

  /* borders & dividers */
  --border-soft: #d4e1ea;

  /* state colors */
  --success: #6fa8a1;
}