:root {
  --neutral-950: #141414;
  --neutral-900: #2b2b2b;
  --neutral-800: #424242;
  --neutral-700: #595858;
  --neutral-600: #706f6f;
  --neutral-500: #878686;
  --neutral-400: #9e9c9c;
  --neutral-300: #b5b2b2;
  --neutral-200: #ccc9c9;
  --neutral-100: #e3dfdf;
  --neutral-50: #faf5f5;

  --primary-900: #009900;
  --primary-800: #00be00;
  --primary-700: #00d300;
  --primary-600: #00ea00;
  --primary-500: #00fc00;
  --primary-400: #00ff00;
  --primary-300: #6cff57;
  --primary-200: #a3ff90;
  --primary-100: #ccffbe;
  --primary-50: #ebffe5;

  --secondary-950: #30086a;
  --secondary-900: #3b1085;
  --secondary-800: #461ba0;
  --secondary-700: #5128bb;
  --secondary-600: #4d2eed;
  --secondary-500: #5c33f4;
  --secondary-400: #7952fe;
  --secondary-300: #9673ff;
  --secondary-200: #b69dfe;
  --secondary-100: #d4c4fe;
  --secondary-50: #efe7ff;

  --additional-01: #ff3719;
  --additional-02: #66f2ff;

  /* Light-Theme */
  --color-light-foreground: var(--neutral-950);
  --color-light-background: var(--neutral-50);
  --color-light-shade-1: #e3dfdf;
  --color-light-shade-2: #ccc9c9;
  --color-light-shade-3: #b5b2b2;
  --color-light-shade-4: #9e9c9c;
  --color-light-text-1: #2b2b2b;
  --color-light-text-2: #424242;
  --color-light-text-3: #595858;
  --color-light-text-4: #706f6f;

  --color-light-primary: var(--secondary-300);
  --color-light-accent-1: var(--secondary-700);
  --color-light-accent-2: var(--additional-01);
  --color-light-accent-3: var(--secondary-900);
  --color-light-error: var(--additional-01);
  --color-light-success: var(--secondary-300);

  --color-light-highlight-1: var(--default-color-light-highlight-1);
  --color-light-highlight-2: var(--default-color-light-highlight-2);
  --color-light-highlight-3: var(--default-color-light-highlight-3);
  --color-light-highlight-4: var(--default-color-light-highlight-4);
  --color-light-highlight-5: var(--default-color-light-highlight-5);
  --color-light-highlight-6: var(--default-color-light-highlight-6);

  --color-light-effect-foreground: var(--color-light-foreground);
  --color-light-effect-background: var(--color-light-primary);
  --effect-light-padding: 0.25em 0.5em;

  /* Dark-Theme */
  --color-dark-foreground: var(--color-light-background);
  --color-dark-background: var(--color-light-foreground);
  --color-dark-text-1: var(--neutral-100);
  --color-dark-text-2: var(--neutral-200);
  --color-dark-text-3: var(--neutral-300);
  --color-dark-text-4: var(--neutral-400);
  --color-dark-shade-1: var(--neutral-900);
  --color-dark-shade-2: var(--neutral-800);
  --color-dark-shade-3: var(--neutral-700);
  --color-dark-shade-4: var(--neutral-600);

  --color-dark-primary: var(--neutral-50);
  --color-dark-accent-1: var(--primary-300);
  --color-dark-accent-2: var(--additional-02);
  --color-dark-accent-3: var(--primary-800);
  --color-dark-error: var(--color-additional-01);
  --color-dark-success: var(--primary-600);

  --color-dark-highlight-1: var(--default-color-dark-highlight-1);
  --color-dark-highlight-2: var(--default-color-dark-highlight-2);
  --color-dark-highlight-3: var(--default-color-dark-highlight-3);
  --color-dark-highlight-4: var(--default-color-dark-highlight-4);
  --color-dark-highlight-5: var(--default-color-dark-highlight-5);
  --color-dark-highlight-6: var(--default-color-dark-highlight-6);

  --color-dark-effect-foreground: var(--color-dark-background);
  --color-dark-effect-background: var(--primary-400);
  --effect-dark-padding: var(--effect-light-padding);

  /* override fonts */
  --font-headings: "KarioDuplexVar", ui-sans, sans-serif;
  --font-headings-variation: "wdth" 67;
  --font-text: "OfficerSans", ui-sans, sans-serif;
  --font-numbers: "OfficerSans", ui-sans, sans-serif;
}

@font-face {
  font-family: "KarioDuplexVar";
  src: URL("./39c3/Kario 39C3 Variable/Kario39C3Var-Roman.ttf")
    format("truetype");
  src: URL("./39c3/Kario 39C3 Variable/Kario39C3VarWEB-Roman.woff")
    format("woff");
  src: URL("./39c3/Kario 39C3 Variable/Kario39C3VarWEB-Roman.woff2")
    format("woff2");
}

@font-face {
  font-family: "OfficerSansCond";
  src: URL("./39c3/Officer Sans Web/OfficerSansCondWeb-Regular.woff")
    format("woff");
  src: URL("./39c3/Officer Sans Web/OfficerSansCondWeb-Regular.woff2")
    format("woff2");
}

@font-face {
  font-family: "OfficerSansCond";
  font-weight: bold;
  font-style: italic;
  src: URL("./39c3/Officer Sans Web/OfficerSansCondWeb-BoldItalic.woff")
    format("woff");
  src: URL("./39c3/Officer Sans Web/OfficerSansCondWeb-BoldItalic.woff2")
    format("woff2");
}

@font-face {
  font-family: "OfficerSansCond";
  font-weight: bold;
  src: URL("./39c3/Officer Sans Web/OfficerSansCondWeb-Bold.woff")
    format("woff");
  src: URL("./39c3/Officer Sans Web/OfficerSansCondWeb-Bold.woff2")
    format("woff2");
}

@font-face {
  font-family: "OfficerSansCond";
  font-style: italic;
  src: URL("./39c3/Officer Sans Web/OfficerSansCondWeb-RegularItalic.woff")
    format("woff");
  src: URL("./39c3/Officer Sans Web/OfficerSansCondWeb-RegularItalic.woff2")
    format("woff2");
}

@font-face {
  font-family: "OfficerSans";
  src: URL("./39c3/Officer Sans Web/OfficerSansWeb-Regular.woff") format("woff");
  src: URL("./39c3/Officer Sans Web/OfficerSansWeb-Regular.woff2")
    format("woff2");
}

@font-face {
  font-family: "OfficerSans";
  font-weight: bold;
  font-style: italic;
  src: URL("./39c3/Officer Sans Web/OfficerSansWeb-BoldItalic.woff")
    format("woff");
  src: URL("./39c3/Officer Sans Web/OfficerSansWeb-BoldItalic.woff2")
    format("woff2");
}

@font-face {
  font-family: "OfficerSans";
  font-weight: bold;
  src: URL("./39c3/Officer Sans Web/OfficerSansWeb-Bold.woff") format("woff");
  src: URL("./39c3/Officer Sans Web/OfficerSansWeb-Bold.woff2") format("woff2");
}

@font-face {
  font-family: "OfficerSans";
  font-style: italic;
  src: URL("./39c3/Officer Sans Web/OfficerSansWeb-RegularItalic.woff")
    format("woff");
  src: URL("./39c3/Officer Sans Web/OfficerSansWeb-RegularItalic.woff2")
    format("woff2");
}