:root {

  /* fonts */
  --font-family:  -apple-system, system-ui, "San Francisco", "HK Grotesk", "Segoe UI", "Helvetica Neue", sans-serif;
  --font-family-mono:  'IBM Plex Mono', monospace;


  --color-white: #FFFFFF;
  --color-black: #000000;

  --color-bg: var(--color-white);

  --color-font-reg: var(--color-black);
  --color-font-med: #737373;
  --color-font-dis: #F2F2F2;

  --color-gray-1: #f8f8f8;
  --color-gray-2: #f5f5f5;
  --color-gray-3: #f2f2f2;
  --color-gray-4: #f0f0f0;
  --color-gray-5: #eaeaea;
  --color-gray-6: #dcdcdc;
  --color-gray-7: #c1c1c1;
  --color-gray-8: #a8a8a8;
  --color-gray-9: #606060;

  --color-brand: #FBE941;
  --color-brand-medium: #FBD841;
  --color-brand-dark: #F7C510;

  --color-red: #E74C3C;
  --color-green: #1ABC9C;
  --color-green-dark: #17A387;
  --color-blue: #5D9BC5;
  --color-violet: #9F63B7;
  --color-orange: #f39c12;
  --color-yellow: var(--color-brand-medium);

  --color-alert-high: var(--color-red);
  --color-alert-medium: var(--color-orange);
  --color-alert-low: var(--color-yellow);

  --color-highlight: var(--color-green);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-white: #39393A;
    --color-black: #FFFFFF;

    /* Variant 1 */
    --color-gray-1: #424243;
    --color-gray-2: #4D4D4D;
    --color-gray-3: #808080;
    --color-gray-4: #3D3D3E;
    --color-gray-5: #2D2D2E;
    --color-gray-6: #505051;
    --color-gray-7: #565657;
    --color-gray-8: #6F6F74;
    --color-gray-9: #78787C;

    --color-font-reg: var(--color-black);
    --color-font-med: #909090;
    --color-font-dis: var(--color-gray-6);
  }
  h1 img {
    filter: invert(100);
  }
}