:root {
    /* Color palette */
    --accent-color: #28827A;
    --primary-color: #28827A;
    --secondary-color: #E57C3A;
    --link-color: #000000;
    --link-color--hover: #000000;

    --black: #000;
    --gray-dark: #333;
    --gray-light: #F7F7F7;
    --white: #FFF;

    --font-darkest: #111;
    --font-dark: #333;
    --font-light: #F7F7F7;
    --font-lightest: var(--white);

    /* Typography */
    --font: "PT Sans", sans-serif;
    --font--heading: "PT Sans", sans-serif;

    --font-weight--heading: 700;

    --font-size: 100%;
    --font-size--footer: 0.875rem;
    --font-size--footer-title: 1rem;

    /* Menu */
    /* --menu-title: 'Valikko'; */
    --user-menu-bg: var(--gray-dark);
    --nav-menu-bg: var(--white);
    --dropdown-bg: var(--secondary-color);
    --dropdown-color: var(--white);
    --menu-hover-bg: transparent;
    --menu-hover-color: var(--primary-color);
    --menu-active-color: var(--black);

    /* Hero */
    --hero-overlay: rgba(0, 0, 0, 0.5);

    /* Content */
    --narrow-content-width: 70ch;
    --content-gap: 1.25rem;

    /* Footer */
    --footer-columns--mobile: 1fr;

    /* Site backgrounds */
    --body-bg: #fff;
    --content-bg: var(--body-bg);
    --footer-bg: var(--primary-color);

    /* Mobile menu colors */
    --mobile-menu-bg: var(--nav-menu-bg);
    --menu-toggler-color: var(--black);

    /* Sizes */
    --branding-height: 110px;
    --hero-height: 60vh;
    --secondary-hero-height: 40vh;

    /* Bootstrap */
    --bs-gutter-x: 1.25rem;
  }


/* Tablet */
@media (min-width: 768px) {
  :root {
    --footer-columns: repeat(3, 1fr);
  }
}

/* Desktop */
@media (min-width: 960px) {
  :root {
    --content-gap: 3.75rem;
  }
}