@font-face {
  font-family: "Exo 2";
  src: url("../fonts/Exo2-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Google Sans Code";
  src: url("../fonts/GoogleSansCode-Variable.woff2") format("woff2");
  font-weight: 300 800;
  font-display: swap;
}

:root {
  color-scheme: dark;

  --grund-0: #040812;
  --paper:   #0B111E;
  --paper-2: #101728;
  --paper-3: #1E2635;
  --rand:    #3A3F4D;
  --feld-rand: var(--ink-45);

  --ink:    #F4F6FB;
  --ink-70: #B6BDCC;
  --ink-45: #8B93A7;
  --rule:      rgba(244, 246, 251, .16);
  --rule-soft: rgba(244, 246, 251, .08);

  --violet:  #A458FF;
  --pink:    #FF006E;
  --tuerkis: #00C8FF;
  --orange:  #FF6E00;
  --gruen:   #B3FF00;
  --gold:    #FFD000;

  --hell-violet:  #9729FF;
  --hell-pink:    #D8005C;
  --hell-tuerkis: #007699;
  --hell-orange:  #FD6F03;
  --hell-gruen:   #7DB400;
  --hell-gold:    #C5A000;

  --font-sans: "Exo 2", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Google Sans Code", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --step: clamp(18px, 2.2vw, 26px);
  --radius: 2px;
  --wrap: 1280px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

body.hell {
  color-scheme: light;

  --grund-0: #FFFFFF;
  --paper:   #F3F1EC;
  --paper-2: #F9F8F5;
  --paper-3: #FDFCFA;
  --rand:    #86837C;
  --feld-rand: var(--rand);

  --ink:    #16181C;
  --ink-70: #494D56;
  --ink-45: #5C606A;
  --rule:      rgba(22, 24, 28, .16);
  --rule-soft: rgba(22, 24, 28, .08);

  --violet:  var(--hell-violet);
  --pink:    var(--hell-pink);
  --tuerkis: var(--hell-tuerkis);
  --orange:  var(--hell-orange);
  --gruen:   var(--hell-gruen);
  --gold:    var(--hell-gold);
}

:root, body.hell {
  --auf-farbe:   var(--grund-0);
  --violet-auf:  var(--grund-0);
  --pink-auf:    var(--grund-0);
  --tuerkis-auf: var(--grund-0);
  --orange-auf:  var(--grund-0);
  --gruen-auf:   var(--grund-0);
  --gold-auf:    var(--grund-0);

  --violet-text:  var(--violet);
  --pink-text:    var(--pink);
  --tuerkis-text: var(--tuerkis);
  --orange-text:  var(--orange);
  --gruen-text:   var(--gruen);
  --gold-text:    var(--gold);

  --ok-text:   var(--gruen-text);
  --warn-text: var(--gold-text);
  --rot-text:  var(--pink-text);

  --hover-schrift: #FFFFFF;
  --hover-tiefe:   #000000;

  --violet-deep: var(--violet);
  --violet-tint: color-mix(in srgb, var(--violet) 14%, transparent);

  --siegel-leer: color-mix(in srgb, var(--ink) 8%, var(--paper));

  --schleier: color-mix(in srgb, var(--grund-0) 70%, transparent);

  --ok:   #3E9E2F;
  --warn: var(--gold);
  --rot:  #E5231B;

  --shadow-violet:  6px 6px 0 var(--violet);
  --shadow-pink:    6px 6px 0 var(--pink);
  --shadow-tuerkis: 6px 6px 0 var(--tuerkis);
}

body.hell {
  --orange-text: var(--ink);
  --gruen-text:  var(--ink);
  --gold-text:   var(--ink);
  --orange-auf:  var(--ink);
  --gruen-auf:   var(--ink);
  --gold-auf:    var(--ink);
}

@media print {
  :root {
    color-scheme: light;
    --grund-0: #FFFFFF;
    --paper: #FFFFFF;
    --paper-2: #FFFFFF;
    --paper-3: #FFFFFF;
    --rand: #999999;
    --ink: #000000;
    --ink-70: #333333;
    --ink-45: #555555;
    --rule: #BBBBBB;
    --rule-soft: #DDDDDD;

    --violet:  var(--hell-violet);
    --pink:    var(--hell-pink);
    --tuerkis: var(--hell-tuerkis);
    --orange:  var(--hell-orange);
    --gruen:   var(--hell-gruen);
    --gold:    var(--hell-gold);
    --violet-tint: transparent;
    --shadow: none;
    --shadow-violet: none;
    --shadow-pink: none;
    --shadow-tuerkis: none;
  }
}