/* COLOR CONFIG
   Edit these values, save, and refresh index.html in your browser.
   Header and footer colors are independent of the main page.
   For a light header, try background #ffffff, text #252924,
   highlight #bd4b28, menu hover #eeeae1, and border #d6d4cd.
*/
:root {
  /* Main page */
  --paper: #faf8f4;
  --ink: #252924;
  --muted: #50514c;
  --line: #d6d4cd;

  /* Shared banners and the homepage preview backdrop */
  --banner-background: #e6dccd;

  /* Homepage: Getting started section */
  --getting-started-background: var(--banner-background);
  --getting-started-text: var(--ink);
  --getting-started-muted: var(--muted);

  /* Buttons, links, and the highlighted headline */
  --accent: #bd4b28;
  --accent-hover: #a43e20;
  --button-text: #ffffff;
  --secondary-hover: #f0e7dd;

  /* Header, navigation, and its dropdown/mobile menu */
  --header-background: #252924;
  --header-text: #faf8f4;
  --header-highlight: #ffa581;
  --header-menu-hover: #343a32;
  --header-border: #60675b;

  /* Footer */
  --footer-background: #252924;
  --footer-text: #faf8f4;
  --footer-link: #ee794e;
  --footer-link-hover: #ffa581;
  --footer-divider: #72766d;

  /* Website illustration */
  --sage: var(--banner-background);
  --preview-paper: #f4f0e7;
  --preview-toolbar: #eaeaea;
  --preview-border: #76776d;
  --browser-red: #ee675d;
  --browser-yellow: #f6bf3f;
  --browser-green: #39a657;

  /* Shadows and modal backdrop; last two digits set transparency */
  --menu-shadow: #25292418;
  --preview-shadow: #25292438;
  --dialog-backdrop: #25292488;
  --form-background: #ffffff;

  /* Landscaping example website */
  --landscape-background: #f5f3e9;
  --landscape-ink: #253e2c;
  --landscape-accent: #426346;
  --landscape-soft: #e7eadb;
  --landscape-button-text: #ffffff;

  /* Power washing example website */
  --wash-background: #ffffff;
  --wash-ink: #16354a;
  --wash-accent: #166b8b;
  --wash-soft: #e9f3f5;
  --wash-button-text: #ffffff;

  /* Wood flooring example website */
  --floor-background: #f8f2e9;
  --floor-ink: #392c23;
  --floor-accent: #815636;
  --floor-soft: #ece0d1;
  --floor-button-text: #ffffff;
}