/* +++++++++++++++++++++++++++++++++++++++++++ */
/* styles that are shared across org/between projects and sites */
/* +++++++++++++++++++++++++++++++++++++++++++ */

/* css variable initialization */
:root{
  /* refactor to pull in site.json */
  --white: #ffffff;
  --dark: #333333;
  --black: #000000;
  /* universal colors */
  --tbgreen: #0A8C61;
  --errorred: #db2a2a;
  --infoblue: #1e90ff;
  --warningyellow: #ffcc00;
  --accent: #0A8C61;
  /* iconography/branding */
  --projectLogo: url("/img/project-logo.png");
  /* fonts */
  --primary-font: Helvetica, sans-serif;
  --secondary-font: monospace;
  /* anims */
  --ux-speed: .35s;
  --ux-hover-speed: var(--ux-speed);
  --ux-active-speed: .15s;
  /* default bg/fg */
  /* utilize data-theme on body! */
  /* spacing */
  --space-xsmall:0.5rem;
  --space-small:1rem;
  --space-medium:2rem;
  --space-large:4rem;
  --space-xlarge:6rem;
}
/* variables for dark/light mode */
[data-theme~="dark"]{
  --background: var(--dark);
  --foreground: var(--white);
}
[data-theme~="light"]{
  --background: var(--white);
  --foreground: var(--dark);
}
/* if system mode is enabled, and set to Dark */
@media (prefers-color-scheme: dark) {
	[data-theme~="system"],
  [data-theme~="sys"]{
		--foreground: var(--white);
    --background: var(--dark);
	}
}
/* variables for high contrast */
[data-theme~="dark"][data-theme~="hc"]{
  --background: var(--black);
  --foreground: var(--white);
}
[data-theme~="light"][data-theme~="hc"]{
  --background: var(--white);
  --foreground: var(--black);
}
/* ------------- */

/* implementing shared variables (body) */
body{
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--secondary-font);
  min-height:100vh;
}
h1, h2, h3, h4, h5, h6, button, .button, input[type='submit']{
  font-family: var(--primary-font);
}
.project-logo{
  /* DEPRECATE, use image elem! */
  background-image:var(--projectLogo);
}
hr{
  border:none;
  border-top:2px solid var(--accent);
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: var(--foreground);
  opacity: .35; /* Firefox */
}

/* attributes */
[disabled]{
  transform:scale(1)!important;
  opacity:.45!important;
  cursor:not-allowed!important;
}
[disabled] *{
  pointer-events:none!important;
}
/* disabled tooltips */
[disabled][data-tooltip]{
  opacity:1!important;
}
[disabled][data-tooltip] i{
  opacity:0.45!important;
}
[disabled][data-tooltip]:after{
  content:"Functionality not supported";
}
/* hidden */
[hidden]{
  display:none!important;
}
/* ------------- */

/* implementing shared variables (user interface) */
*::selection{
  color:var(--background);
	background-color:var(--foreground);
}
*::-moz-selection{
  color:var(--background);
	background-color:var(--foreground);
}
/* highlight via URL */
::target-text{
  /* fallback */
  background-color:rgba(10, 140, 97);
  /* variable */
  background-color:var(--accent);
}

/* ------------- */

/* expand on Aurum styles; eventually move to Aurum package... */
[data-au~="xsmall-gap"],
.xsmall-gap{
  gap:var(--space-xsmall);
}
[data-au~="small-gap"],
.small-gap{
  gap:var(--space-small);
}
[data-au~="medium-gap"],
.medium-gap{
  gap:var(--space-medium);
}
[data-au~="large-gap"],
.large-gap{
  gap:var(--space-large);
}
[data-au~="xlarge-gap"],
.xlarge-gap{
  gap:var(--space-xlarge);
}
/* .small-gap{
  gap:var(--space-small);
}
.medium-gap{
  gap:var(--space-medium);
}
.large-gap{
  gap:var(--space-large);
} */
/* +++++++++++++++++++++++++++++++++++++++++++ */