@font-face {
  font-family: 'OpenSans';
  font-style: normal;
  font-weight: 400;
  src: url(fonts/openSansLatin400.woff2) format('woff2');
}

@font-face {
  font-family: 'OpenSans';
  font-style: bold;
  font-weight: 600;
  src: url(fonts/openSansLatin600.woff2) format('woff2');
}

@font-face {
  font-family: 'OpenSans';
  font-style: lighter;
  font-weight: 300;
  src: url(fonts/openSansLatin300.woff2) format('woff2'); 
}

body {
  margin: 0;
}

html {
  --color-border: #ccc;
  --color-text: #444;
  --color-text-disabled: rgba(68, 68, 68, 0.658);
  --color-text-inverse: #fff;
  --color-meta: #666;
  
  --color-background: #ebeae1;
  --color-button-background: #fff;
  --color-card-background: rgba(255,255,255,0.7);
  --color-background-footer: #daded3;
  --color-background-inverse: rgb(18, 172, 120);
  --color-background-inverse-hover: rgb(38, 204, 149);
  
  --color-interaction-0: rgb(126, 233, 197);
  --color-interaction-1: rgb(81, 190, 154);
  --color-interaction-2: rgb(43, 116, 91);
  --color-interaction-3: rgb(7, 80, 55);
  
  --color-table-background-even: #fff;
  --color-table-background-odd: #f1f1eb;
  --color-input-background: #fff;
  --color-input-text: #444;
  --color-input-border: rgba(111, 144, 236, 0.315);
  --color-input-border-hover: rgb(111, 144, 236);
  --color-input-border-focus:rgb(58, 98, 207);
  
  --color-autocomplete-text: var(--color-text);
  --color-autocomplete-text-hover: var(--color-text-inverse);
  --color-autocomplete-background: #fff;
  --color-autocomplete-background-hover: var(--color-input-border-focus);
  
  --color-header-background: rgb(72, 56, 56);
  --color-edit-marker: var(--color-text-inverse);
  --color-status-error:rgb(182, 4, 4);
  --color-status-error-2:rgb(67, 0, 0);
  --color-status-ok:rgb(0, 182, 52);

  margin: 0;
  font-family: 'OpenSans', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 14px;
  line-height: 18px;
  
  background: var(--color-background);    
  color: var(--color-text);

  box-sizing: border-box;
}


@media (prefers-color-scheme: dark) {
  html {
    --color-border: #333;
    --color-text: #999;
    --color-text-disabled: rgba(68, 68, 68, 0.658);
    --color-text-inverse: #bcbcbc;
    --color-meta: #666;
    --color-background: #111;
    --color-background-inverse: rgb(18, 172, 120);
    --color-background-inverse-hover: rgb(38, 204, 149);
    --color-button-background: #181818;
    --color-card-background: #222;
    --color-background-footer: #1b1b1b;
    
    --color-interaction-3: rgb(126, 233, 197);
    --color-interaction-2: rgb(81, 190, 154);
    --color-interaction-1: rgb(43, 116, 91);
    --color-interaction-0: rgb(7, 80, 55);
    
    --color-table-background-even: #1d1d1d;
    --color-table-background-odd: #151515;
    --color-input-background: #1b1b1b;
    --color-input-text: #999;
    --color-input-border: rgba(111, 144, 236, 0.315);
    --color-input-border-hover: rgb(111, 144, 236);
    --color-input-border-focus:rgb(58, 98, 207);
    
    --color-autocomplete-text: var(--color-text);
    --color-autocomplete-text-hover: var(--color-text-inverse);
    --color-autocomplete-background: #333;
    --color-autocomplete-background-hover: var(--color-input-border-focus);

    --color-header-background: #0a0a0a;
    --color-edit-marker: var(--color-text-inverse);
    --color-status-error:rgb(182, 4, 4);
    --color-status-error-2:rgb(67, 0, 0);
    --color-status-ok:rgb(0, 182, 52);
  }
}


a,
a:visited {
  color: var(--color-interaction-2);
  transition: linear 200ms all;
}

a:hover,
a:focus {
  color: var(--color-interaction-3); 
}

/* gna. does not work */
h2 a {
  text-decoration: none;
  color: red;
}

textarea {
  font-family: var(--font-family);
}