@font-face {
  font-family: computer;
  src: url(/fonts/computer.woff);
}

/* The use of the word "value" here is not a generic variable name.
 * It's from painting and has a technical meaning of "the light or dark of a shape".
 * The value numbers loosely map to the % luminance in the hsl() function, and you can
 * adjust these values easily to test out different light/dark arrangements without
 * having to adjust every variable below.  See the static/color.css for a simple example
 * that uses color but is still monochrome.
 */

:root {
  /* light values */
  --value9: hsl(0, 0%, 100%); /* not used too often */
  --value8: hsl(0, 0%, 99%);
  --value7: hsl(0, 0%, 90%);
  --value6: hsl(0, 0%, 85%);
  --value5: hsl(0, 0%, 80%);

  /* dark values */
  --value4: hsl(0, 0%, 44%);
  --value3: hsl(0, 0%, 33%);
  --value2: hsl(0, 0%, 22%);
  --value1: hsl(0, 0%, 11%);
  --value0: hsl(0, 0%, 1%);

  /* fake the colors for monochrome */
  --orange: var(--value2);
  --yellow: var(--value1);
  --red: var(--value0);
  --purple: var(--value2);
  --blue: var(--value1);
  --green: var(--value0);

  /* you always need dark and light variants it seems */
  --invert-orange: var(--value7);
  --invert-yellow: var(--value8);
  --invert-red: var(--value9);
  --invert-purple: var(--value7);
  --invert-blue: var(--value8);
  --invert-green: var(--value9);

  /* the rest of the variables use the above */
  --border-radius: 5px;
  --box-shadow: 0 2px 2px;
  --color: var(--value0);
  --color-accent: var(--value3);
  --color-icon-image: var(--value1);
  --color-inactive: var(--value3);
  --color-inactive-secondary: var(--value5);
  --color-bg: var(--value8);
  --color-bg-secondary: var(--value6);
  --color-bg-tertiary: var(--value5);
  --color-secondary: var(--value1);
  --color-secondary-accent: var(--blue);
  --color-shadow: var(--value4);
  --color-shadow-secondary: var(--value3);
  --color-shadow-dark: var(--value2);
  --color-bg-inverted: var(--value2);
  --color-text: var(--value0);
  --color-text-inverted: var(--value7);
  --color-bright: var(--value8);
  --color-overlay-text: var(--value1);
  --color-overlay-background: var(--value6);
  --color-overlay-shadow: var(--value0);
  --color-border-tabs: var(--value2);
  --color-input-button: var(--value8);
  --color-input-border: var(--value1);
  --color-input-bg: var(--value6);
  --color-border: var(--value3);
  --color-error: var(--red);
  --color-warning: var(--orange);
  --color-good: var(--green);
  --color-info: var(--yellow);
  --color-pulse-1: hsla(0, 0%, 53%, 1);
  --color-pulse-2: hsla(0, 0%, 53%, 0.7);
  --color-pulse-3: hsla(0, 0%, 53%, 0.1);
  --color-pulse-4: hsla(0, 0%, 53%, 0);
  --font-family: "Andale Mono", "Monaco", monospace, monospace;
  --font-computer: computer, monospace, monospace;
  --font-size: 1.05em;
  --font-text-size: 1.4em; /* for paragraphs mostly */
  --font-heading-size: 2em;
  --font-heading-weight: 300;
  --font-header-nav: 1.3em;
  --font-button-size: 1.4em;
  --hover-brightness: 1.2;
  --justify-important: center;
  --justify-blockquote: left;
  --justify-normal: left;
  --line-height: 1.5;
  --width-card: 385px;
  --width-card-medium: 460px;
  --width-card-wide: 800px;
  --width-content: 1080px;
  --width-badge: 20px;
  --font-size-badge: 13px;
}

[data-theme="dark"] {
  /* fake the colors for monochrome */
  --orange: var(--value7);
  --yellow: var(--value8);
  --red: var(--value9);
  --purple: var(--value7);
  --blue: var(--value8);
  --green: var(--value9);

  /* you always need dark and light variants it seems */
  --invert-orange: var(--value2);
  --invert-yellow: var(--value1);
  --invert-red: var(--value0);
  --invert-purple: var(--value2);
  --invert-blue: var(--value1);
  --invert-green: var(--value0);

  --color: var(--value8);
  --color-accent: var(--value7);
  --color-icon-image: var(--value8);
  --color-bg: var(--value0);
  --color-bg-secondary: var(--value2);
  --color-bg-tertiary: var(--value3);
  --color-shadow-secondary: var(--value6);
  --color-secondary: var(--value7);
  --color-secondary-accent: var(--value7);
  --color-shadow: var(--value2);
  --color-text: var(--value8);
  --color-text-secondary: var(--value8);
  --color-text-inverted: var(--value1);
  --color-inactive: var(--value4);
  --color-bg-inverted: var(--value6);
  --color-input-border: var(--value7);
  --color-input-button: var(--value6);
  --color-border: var(--value3);
  --color-input-bg: var(--value7);
  --color-error: var(--red);
  --color-warning: var(--orange);
  --color-good: var(--green);
  --color-info: var(--yellow);
  --color-pulse-1: hsla(0, 0%, 80%, 1);
  --color-pulse-2: hsla(0, 0%, 80%, 0.7);
  --color-pulse-3: hsla(0, 0%, 80%, 0.1);
  --color-pulse-4: hsla(0, 0%, 80%, 0);
  --color-overlay-text: var(--value7);
  --color-overlay-background: var(--value2);
  --color-overlay-shadow: var(--value6);
}