:root {
  --color-font-primary: #615454;
  --color-font-secondary: #59453e;
  --color-font-bright: #f6fafb;

  --color-ambient-mint: #83c7bd;
  --color-ambient-mint-dark: #69a8a7;
  --color-ambient-mint-light: #dbefec;
  --color-ambient-mint-light-lowsaturation: #deeae6;
  --color-ambient-mint-shine: #f0f4f5;

  --color-ambient-rosa: #ec776a;
  --color-ambient-rosa-dark: #ba564d;
  --color-ambient-rosa-light: #f8c8c2;

  --color-ambient-orange: #f4a100;
  --color-ambient-orange-light: #ffefcd;

  --color-ambient-brown: #644c4f;
  --color-ambient-pink: rgba(253, 241, 240, 0.8);

  --color-ambient-facebook: #4e85bf;

  --color-ambient-grey: #aaaaaa;
  --color-ambient-grey-dark: #808080;
  --color-ambient-grey-light: #f0f0f0;

  --color-ambient-bright: #fcfcfc;
  --color-surface-lightblue: #eaf2f4;
  --color-surface-white: #ffffff;

  --font-primary: "Lato", sans-serif;
  --font-secondary: "amaticbold", sans-serif;
  --font-tertiary: "Loved by the King", sans-serif;

  --layout-max-width: 980px;
  --layout-outer-max-width: 1680px;
  --layout-inline-padding: 18px;
}

/*
 * Breakpoint reference for plain CSS files.
 *
 * CSS custom properties cannot be used inside @media conditions, so migrated
 * CSS should hardcode these values for now:
 *
 * small: 320px
 * smallplus: 414px
 * medium: 650px
 * large: 980px
 * xlarge: 1280px
 *
 * When native custom media is broadly supported in our browser baseline, this
 * file can become the single source of truth with declarations like:
 *
 * @custom-media --viewport-medium (min-width: 650px);
 * @custom-media --viewport-large (min-width: 980px);
 */

@media (min-width: 650px) {
  :root {
    --layout-inline-padding: 25px;
  }
}