/* Fonts */

@font-face{
  font-family: Museo-700;
  src: url(/fonts/Museo-700.otf) format("opentype");
  font-style: normal;
  font-weight: normal;
}
@font-face{
  font-family: Museo-300;
  src: url(/fonts/Museo-300.otf) format("opentype");
  font-style: normal;
  font-weight: normal;
}

/* Vars */

:root {
  /* Typography */
  --siteFont: "Museo-300", Avenir, "Century Gothic", CenturyGothic, "Segoe UI", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--text-color-normal: hsl(var(--theme-hue), 0%, 0%);

  /* Navigation & layout sizes */
  --navWidth: 250px;
  --padding: 2rem;
  --main-padding: 4rem 2rem;
  --text-color-normal: #fcfdfb;
  
  --accent1: #5d7a1d;
  --accent2: #e58411;

  /* Transitions */
  --fade-anim:                           transform 0s linear 0.35s, visibility 0s linear 0.35s, opacity 0.35s linear;
  --fade-anim-showing:                   visibility 0s linear, opacity 0.35s linear;
  --fade-anim-showing-delayed:           transform 0s linear, visibility 0s linear, 1.65s opacity 0.35s linear;
  --opacity-transition-medium:           opacity 0.5s linear;
  --eased-transition-fast:               transform 0.15s cubic-bezier(.53,0,.53,1);
  --eased-transition-medium:             transform 0.75s cubic-bezier(.53,0,.53,1);
  --eased-transition-long:               transform 1.25s cubic-bezier(.53,0,.53,1);
  --eased-transition-long-delay:   1.1s  transform 0.40s cubic-bezier(.53,0,.53,1);
  --eased-transition-medium-delay: 0.75s transform 0.75s cubic-bezier(.53,0,.53,1);
}

/* barebones.css override */

html,
html[data-theme="dark"] {
  --theme-hue: 0;					/* white */
  --accent-hue: 78;			/* dbg green: #50661B   HSB: 78, 74, 40 */
  --accent-color: #9dd6c6;				/* #33C3F0 		link; button-primary bg+border; textarea,select:focus border */
  --accent-color-hover: hsl(var(--accent-hue), 160%, 23%);	/* #1EAEDB 		link hover; button-primary:hover:focus bg+border */
}

/* responsive variables example */

@media all and (min-width: 450px) {
  :root {
    --padding: 4rem;
    --main-padding: 4rem;
  }
}
@media all and (min-width: 768px) {
  :root {
    --main-padding: 0 0rem;
  }
}