:root {
    --theme-l5: #7fffc7;
    --theme-l4: #66f8ae;
    --theme-l3: #4ddf95;
    --theme-l2: #33c57b;
    --theme-l1: #1aac62;
    --theme-d1: #00792f;
    --theme-d2: #005f15;
    --theme-d3: #004600;
    --theme-d4: #002c00;
    --theme-d5: #001300;

    --theme-light: #e9fff4;
    --theme-dark: #004a25;
    --theme-action: #004a25;

    --theme: #009248;
    --theme-text: #009248;

    --theme-modal: #008000;

    /*
     * Farbenzahlen von 100-60 bekommen Weißen Text, 50-10 Schwarzen Text
     * Ebenso sind Kombinationen möglich wenn die Farbzahlen Differenz 50
     * oder mehr ist(Sprich sie genügt dem WCAG AA Standard)
     * Beispiel: blue-80 Hintergrund, cyan-20 Vordergrund -> 80-20 = 60 >= 50
     */

    --black: #000000;
    --white: #ffffff;

    --red-100: #2d0709;
    --red-90: #520408;
    --red-80: #750e13;
    --red-70: #a2191f;
    --red-60: #da1e28;
    --red-50: #fa4d56;
    --red-40: #ff8389;
    --red-30: #ffb3b8;
    --red-20: #ffd7d9;
    --red-10: #fff1f1;

    --magenta-100: #2a0a18;
    --magenta-90: #510224;
    --magenta-80: #740937;
    --magenta-70: #9f1853;
    --magenta-60: #d02670;
    --magenta-50: #ee5396;
    --magenta-40: #ff7eb6;
    --magenta-30: #ffafd2;
    --magenta-20: #ffd6e8;
    --magenta-10: #fff0f7;

    --purple-100: #1c0f30;
    --purple-90: #31135e;
    --purple-80: #491d8b;
    --purple-70: #6929c4;
    --purple-60: #8a3ffc;
    --purple-50: #a56eff;
    --purple-40: #be95ff;
    --purple-30: #d4bbff;
    --purple-20: #e8daff;
    --purple-10: #f6f2ff;

    --blue-100: #001141;
    --blue-90: #001d6c;
    --blue-80: #002d9c;
    --blue-70: #0043ce;
    --blue-60: #0f62fe;
    --blue-50: #4589ff;
    --blue-40: #78a9ff;
    --blue-30: #a6c8ff;
    --blue-20: #d0e2ff;
    --blue-10: #edf5ff;

    --cyan-100: #061727;
    --cyan-90: #012749;
    --cyan-80: #003a6d;
    --cyan-70: #00539a;
    --cyan-60: #0072c3;
    --cyan-50: #1192e8;
    --cyan-40: #33b1ff;
    --cyan-30: #82cfff;
    --cyan-20: #bae6ff;
    --cyan-10: #e5f6ff;

    --teal-100: #081a1c;
    --teal-90: #022b30;
    --teal-80: #004144;
    --teal-70: #005d5d;
    --teal-60: #007d79;
    --teal-50: #009d9a;
    --teal-40: #08bdba;
    --teal-30: #3ddbd9;
    --teal-20: #9ef0f0;
    --teal-10: #d9fbfb;

    --green-100: #071908;
    --green-90: #022d0d;
    --green-80: #044317;
    --green-70: #0e6027;
    --green-60: #198038;
    --green-50: #24a148;
    --green-40: #42be65;
    --green-30: #6fdc8c;
    --green-20: #a7f0ba;
    --green-10: #defbe6;

    --yellow-100: #1c1500;
    --yellow-90: #302400;
    --yellow-80: #483700;
    --yellow-70: #684e00;
    --yellow-60: #8e6a00;
    --yellow-50: #b28600;
    --yellow-40: #d2a106;
    --yellow-30: #f1c21b;
    --yellow-20: #fddc69;
    --yellow-10: #fcf4d6;

    --orange-100: #231000;
    --orange-90: #3e1a00;
    --orange-80: #5e2900;
    --orange-70: #8a3800;
    --orange-60: #ba4e00;
    --orange-50: #eb6200;
    --orange-40: #ff832b;
    --orange-30: #ffb784;
    --orange-20: #ffd9be;
    --orange-10: #fff2e8;

    --coolgray-100: #121619;
    --coolgray-90: #21272a;
    --coolgray-80: #343a3f;
    --coolgray-70: #4d5358;
    --coolgray-60: #697077;
    --coolgray-50: #878d96;
    --coolgray-40: #a2a9b0;
    --coolgray-30: #c1c7cd;
    --coolgray-20: #dde1e6;
    --coolgray-10: #f2f4f8;

    --gray-100-t: rgba(22, 22, 22, 0.5);
    --gray-100: #161616;
    --gray-90: #262626;
    --gray-80: #393939;
    --gray-70: #525252;
    --gray-60: #6f6f6f;
    --gray-50: #8d8d8d;
    --gray-40: #a8a8a8;
    --gray-30: #c6c6c6;
    --gray-20: #e0e0e0;
    --gray-10: #f4f4f4;

    --warmgray-100: #171414;
    --warmgray-90: #272525;
    --warmgray-80: #3c3838;
    --warmgray-70: #565151;
    --warmgray-60: #726e6e;
    --warmgray-50: #8f8b8b;
    --warmgray-40: #ada8a8;
    --warmgray-30: #cac5c4;
    --warmgray-20: #e5e0df;
    --warmgray-10: #f7f3f2;

    /* ----- Core Tokens ----- */

    /* Standard Hintergrund */
    --ui-background: var(--white);
    /* Button/Element Kontrast Seperator */
    --button-separator: var(--gray-20);
    /* Deko Elemente */
    --decorative-01: var(--gray-20);
    /* Link für Hintergründe mit Hohem Kontrast (inverse-02) */
    --inverse-link: var(--green-40);
    /* Hintergrund Overlays (Modal Dialoge z.B.) */
    --overlay-01: var(--gray-100-t);

    /*
     * 01: Primärfarbe für Interaktionen/Haupt Buttons
     * 02: Sekundärfarbe für Interaktionen/Neben buttons
     * 03: Teritiärsfarbe für Buttons und 4.5:1 AA Kontrast
     * 04: Selektierte/Aktive Elemente und 3:1 AA Kontrast
     */
    --interactive-01: var(--green-60);
    --interactive-02: var(--gray-80);
    --interactive-03: var(--green-60);
    --interactive-04: var(--green-60);

    /*
     * 01: Gefahrenbutton Hintergrund und 3:1 AA Kontrast
     * 02: Gefahrenbutton Variante und für Gefahren Texte/Icons/Borders
     */
    --danger-01: var(--red-60);
    --danger-02: var(--red-60);

    /*
     * 01: Sekundärhintergrund und Container Hintergrund für ui-background, Headers
     * 02: Container Hintergrund für ui-01 und 'light' Hintergrund Variante
     * 03: Teritiärshintergrund und Subtile Borders
     * 04: 3:1 AA Kontrast für Elemente und Mittlerer Kontrast für Borders
     * 05: 4.5:1 AA Kontrst für Elemente ,Hoher Kontrast für Borders und Unterstreichende Elemente
     */
    --ui-01: var(--warmgray-10);
    --ui-02: var(--white);
    --ui-03: var(--gray-20);
    --ui-04: var(--gray-50);
    --ui-05: var(--gray-100);

    /*
     * 01: Haupttexte,  Body Copy(?), Headers, Hover Text Farbe für text-02
     * 02: Sekundärtexte, Input Labels
     * 03: Placeholder Texte
     * 04: Textfarbe für 'interactive-xx' Farben
     * 05: Teritiärtexte, Hilfetexte
     */
    --text-01: var(--gray-100);
    --text-02: var(--gray-70);
    --text-03: var(--gray-40);
    --text-04: var(--white);
    --text-05: var(--gray-60);

    /*
     * 01: Primärlinks, Geister Buttons
     * 02: Sekundärlinks mit Niedrigem Hintergrund Kontrast
     */
    --link-01: var(--green-60);
    --link-02: var(--green-70);

    /*
     * 01: Primäricons
     * 02: Sekundäricons
     * 03: Icons auf 'interactive-xx' Farben und Non-UI Farben
     */
    --icon-01: var(--gray-100);
    --icon-02: var(--gray-70);
    --icon-03: var(--white);

    /*
     * 01: Default Input Felder und Felder auf ui-background
     * 02: 'Light' Input Felder und Felder auf ui-01 Hintergründen
     */
    --field-01: var(--gray-10);
    --field-02: var(--white);

    /*
     * 01: Inverse Text und Icon Farbe
     * 02: Hohe Kontrast Hintergründe und Elemente
     */
    --inverse-01: var(--white);
    --inverse-02: var(--gray-80);

    /*
     * 01: Fehler
     * 02: Erfolg
     * 03: Warnung
     * 04: Information
     */
    --support-01: var(--red-60);
    --support-02: var(--green-50);
    --support-03: var(--yellow-30);
    --support-04: var(--blue-70);

    /*
     * Selbe wie oben nur für Hohe Kontraste
     */
    --inverse-support-01: var(--red-50);
    --inverse-support-02: var(--green-40);
    --inverse-support-03: var(--yellow-30);
    --inverse-support-04: var(--blue-50);

    /* ----- Interactive Tokens ----- */
    /*
     * Hover + Selected: Eine stufe Heller bei Farbzahlen 100-70, Dunkler bei 60-10.
     * Active: Zwei Stufen Heller bei Farbzahlen 100-70, Dunkler bei 60-10.
     * Disabled: gray-30
     * Heller -> Niedrigere Zahlen
     * Dunkler -> Höhere Zahlen
     */
    /*
     * - Focus Rahmen und unterstreichung
     * - Focus für Hohe Kontraste
     */
    --focus: var(--green-60);
    --inverse-focus-ui: var(--white);

    /*
     * h-p: interactive-01 Hover
     * h-p-t: interactive-01 Text Hover
     * h-s: interactive-02 Hover
     * h-t: interactive-03 und inverse-01 hover
     * h-u: Hover für ui-01, ui-02 und Transparente Hintergründe
     * h-l-u: 'Light' Hover Variante
     * h-s-u: Hover für Selektierte Zeilen
     * h-d: Fehler und support-01 Hover
     * h-r: Zeilen Hover
     * i-h-u: inverse-02 Hover
     */
    --hover-primary: var(--green-70);
    --hover-primary-text: var(--green-70);
    --hover-secondary: var(--gray-70);
    --hover-tertiary: var(--green-70);
    --hover-ui: var(--gray-20);
    --hover-light-ui: var(--gray-20);
    --hover-selected-ui: var(--gray-30);
    --hover-danger: var(--red-70);
    --hover-row: var(--gray-20);
    --inverse-hover-ui: var(--gray-70);

    /*
     * a-p: interactive-01 active
     * a-s: interactive-02 und inverse-01 active
     * a-t: interactive-03 active
     * a-u: ui-01 und ui-02 active
     * a-l-u: 'Light' active Variante
     * a-d: Fehler active
     */
    --active-primary: var(--green-80);
    --active-secondary: var(--gray-60);
    --active-tertiary: var(--green-80);
    --active-ui: var(--gray-30);
    --active-light-ui: var(--gray-30);
    --active-danger: var(--red-80);

    /*
     * - Selektierte UI Elemente
     * - 'Light' Variante für Selektierte UI Elemente
     */
    --selected-ui: var(--gray-20);
    --selected-light-ui: var(--gray-20);

    /*
     * - interactive-01 Highlight
     * - ladende Elemente
     * - ladende Texte
     * - besuchte links
     */
    --highlight: var(--green-20);
    --skeleton-01: var(--gray-20);
    --skeleton-02: var(--gray-30);
    --visited-link: var(--teal-60);

    /*
     * 01: Deaktivierte Fields, Hintergründe und Borders
     * 02: Deaktivierte Elemente und Texte unter disabled-01
     *     Deaktivierte Labels, Icons und Border
     * 03: Deaktivierte Texte und Icons unter disabled-02
     */
    --disabled-01: var(--gray-10);
    --disabled-02: var(--gray-30);
    --disabled-03: var(--gray-50);

    /*
     *
     */
    --std-shadow: 0.25rem 0.25rem 0.25rem #0006;

    /*
     * Notification Colors
     */
    --notification-error-background-color: var(--red-10);
    --notification-success-background-color: var(--green-10);
    --notification-warning-background-color: var(--yellow-10);
    --notification-info-background-color: var(--blue-10);

    /*
     * Standard Abstände zwischen Komponenten innerhalb eines Elements.
     * Zum Beispiel der Abstand zwischen einem Label und einem Input Feld.
     */
    --spacing-01: 0.125rem;
    --spacing-02: 0.25rem;
    --spacing-03: 0.5rem;
    --spacing-04: 0.75rem;
    --spacing-05: 1rem;
    --spacing-06: 1.5rem;
    --spacing-07: 2rem;
    --spacing-08: 2.5rem;
    --spacing-09: 3rem;

    /*
     * Standard Abstände zwischen Elementen im Layout.
     * Beispiel: Abstand zwischen einem Form und einer Tabelle.
     */
    --layout-01: 1rem;
    --layout-02: 1.5rem;
    --layout-03: 2rem;
    --layout-04: 3rem;
    --layout-05: 4rem;
    --layout-06: 6rem;
    --layout-07: 10rem;
    /*
     * Standard Fonts zur Nutzung in "font:" CSS Deklarationen auf Elementen.
     * Variablen mit dem "-ls" suffix sind für das CSS Property "letter-spacing" gedacht, zum entsprechenden font.
     */
    --code-01: 400 0.75rem/1rem monospace, tahoma, arial, helvetica, sans-serif;
    --code-01-ls: 0.32px;
    --code-02: 400 0.875rem/1.25rem monospace, tahoma, arial, helvetica,
        sans-serif;
    --code-02-ls: 0.32px;

    --label-01: 400 0.75rem/1rem tahoma, arial, helvetica, sans-serif;
    --label-01-ls: 0.32px;

    --caption-01: 400 0.75rem/1rem, tahoma, arial, helvetica, sans-serif;
    --caption-01-ls: 0.32px;

    --helper-text-01: 400 0.75rem/1rem tahoma, arial, helvetica, sans-serif;
    --helper-text-01-ls: 0.32px;

    --body-short-01: 400 0.875rem/1.125rem tahoma, arial, helvetica, sans-serif;
    --body-short-01-ls: 0.16px;
    --body-short-02: 400 1rem/1.375rem tahoma, arial, helvetica, sans-serif;
    --body-short-02-ls: 0px;

    --body-long-01: 400 0.875rem/1.25rem tahoma, arial, helvetica, sans-serif;
    --body-long-01-ls: 0.16px;
    --body-long-02: 400 1rem/1.5rem tahoma, arial, helvetica, sans-serif;
    --body-long-02-ls: 0px;

    --heading-01: 600 0.875rem/1.125rem tahoma, arial, helvetica, sans-serif;
    --heading-01-ls: 0.16px;
    --heading-02: 600 1rem/1.375rem tahoma, arial, helvetica, sans-serif;
    --heading-02-ls: 0px;
    --heading-03: 400 1.25rem/1.75rem tahoma, arial, helvetica, sans-serif;
    --heading-03-ls: 0px;
    --heading-04: 400 1.75rem/2.25rem tahoma, arial, helvetica, sans-serif;
    --heading-04-ls: 0px;
    --heading-05: 400 2rem/2.5rem tahoma, arial, helvetica, sans-serif;
    --heading-05-ls: 0px;
    --heading-06: 300 2.625rem/3.125rem tahoma, arial, helvetica, sans-serif;
    --heading-06-ls: 0px;
    --heading-07: 300 3.375rem/4rem tahoma, arial, helvetica, sans-serif;
    --heading-07-ls: 0px;
}