/* Primitives — from "Web Basisfarben.pdf" */
:root {
    /* Color/Primary */
    --color-primary-900: #1a1a1a;
    --color-primary-800: #202020;
    --color-primary-700: #353535;
    --color-primary-600: #404040;
    --color-primary-500: #606060;
    --color-primary-400: #808080;
    --color-primary-300: #bfbfbf;
    --color-primary-200: #eaeaea;
    --color-primary-100: #f3f3f3;
    --color-primary-50: #ffffff;

    /* Color/Accent-Blue */
    --color-accent-blue-900: #001224;
    --color-accent-blue-800: #001c38;
    --color-accent-blue-700: #003061;
    --color-accent-blue-600: #00488f;
    --color-accent-blue-500: #0064c8;
    --color-accent-blue-400: #007af5;
    --color-accent-blue-300: #73b5ff;
    --color-accent-blue-200: #b5d9ff;
    --color-accent-blue-100: #d1e7ff;
    --color-accent-blue-50: #ebf5ff;

    /* Color/Accent-Yellow */
    --color-accent-yellow-900: #554600;
    --color-accent-yellow-800: #a38000;
    --color-accent-yellow-700: #d4af00;
    --color-accent-yellow-600: #ffd200;
    --color-accent-yellow-500: #f9dd4b;
    --color-accent-yellow-400: #ffe155;
    --color-accent-yellow-300: #ffeb8c;
    --color-accent-yellow-200: #fff0aa;
    --color-accent-yellow-100: #fff8d9;
    --color-accent-yellow-50: #fffcee;

    /* Color/Neutral */
    --color-neutral-900: #1a1a1a;
    --color-neutral-800: #202020;
    --color-neutral-700: #353535;
    --color-neutral-600: #404040;
    --color-neutral-500: #606060;
    --color-neutral-400: #808080;
    --color-neutral-300: #bfbfbf;
    --color-neutral-200: #dcdcdc;
    --color-neutral-100: #eaeaea;
    --color-neutral-50: #f2f2f2;
    --color-neutral-white: #ffffff;
    --color-neutral-black: #000000;

    /* Color/Green */
    --color-green-900: #285231;
    --color-green-800: #306339;
    --color-green-700: #3c7e44;
    --color-green-600: #4ca154;
    --color-green-500: #5ec269;
    --color-green-400: #77db89;
    --color-green-300: #a0ecb1;
    --color-green-200: #c7f5d3;
    --color-green-100: #e2fbe8;
    --color-green-50: #f2fdf5;

    /* Color/Yellow */
    --color-yellow-900: #6a411c;
    --color-yellow-800: #7d501f;
    --color-yellow-700: #986523;
    --color-yellow-600: #c18d30;
    --color-yellow-500: #e2b53e;
    --color-yellow-400: #f3ce49;
    --color-yellow-300: #f8e164;
    --color-yellow-200: #fcf097;
    --color-yellow-100: #fdf9c9;
    --color-yellow-50: #fefcea;

    /* Color/Red */
    --color-red-900: #752522;
    --color-red-800: #8c2822;
    --color-red-700: #aa2e26;
    --color-red-600: #de2d22;
    --color-red-500: #dd524c;
    --color-red-400: #e77975;
    --color-red-300: #f0a9a7;
    --color-red-200: #f6cccb;
    --color-red-100: #f9e3e2;
    --color-red-50: #fcf2f2;

    /* Color/Blue */
    --color-blue-900: #1e3a8a;
    --color-blue-800: #1e40af;
    --color-blue-700: #1d4ed8;
    --color-blue-600: #2563eb;
    --color-blue-500: #3b82f6;
    --color-blue-400: #60a5fa;
    --color-blue-300: #93c5fd;
    --color-blue-200: #bfdbfe;
    --color-blue-100: #dbeafe;
    --color-blue-50: #eff6ff;
}

/* Semantic tokens — from "Web Semantische Farben.pdf" */
:root {
    /* Font/Regular */
    --font-regular-high: var(--color-neutral-900);
    --font-regular-low: var(--color-neutral-600);
    --font-regular-white: var(--color-neutral-white);
    --font-regular-black: var(--color-neutral-black);

    /* Font/Interactive */
    --font-interactive-default: var(--color-primary-600);
    --font-interactive-hover: var(--color-primary-700);
    --font-interactive-pressed: var(--color-primary-800);

    /* Font/Severity/Info */
    --font-severity-info-high: var(--color-blue-800);
    --font-severity-info-low: var(--color-blue-700);

    /* Font/Severity/Success */
    --font-severity-success-high: var(--color-green-800);
    --font-severity-success-low: var(--color-green-700);

    /* Font/Severity/Warning */
    --font-severity-warning-high: var(--color-yellow-800);
    --font-severity-warning-low: var(--color-yellow-700);

    /* Font/Severity/Error */
    --font-severity-error-high: var(--color-red-800);
    --font-severity-error-low: var(--color-red-700);

    /* Font/Disabled */
    --font-disabled-default: var(--color-neutral-500);

    /* Background/Regular */
    --background-regular-high: var(--color-neutral-900);
    --background-regular-medium: var(--color-neutral-600);
    --background-regular-low: var(--color-neutral-300);
    --background-regular-lower: var(--color-neutral-200);
    --background-regular-white: var(--color-neutral-white);

    /* Background/Accent Blue */
    --background-accent-blue-highest: var(--color-accent-blue-800);
    --background-accent-blue-higher: var(--color-accent-blue-700);
    --background-accent-blue-high: var(--color-accent-blue-600);
    --background-accent-blue-medium: var(--color-accent-blue-500);
    --background-accent-blue-low: var(--color-accent-blue-300);
    --background-accent-blue-lower: var(--color-accent-blue-200);
    --background-accent-blue-lowest: var(--color-accent-blue-50);

    /* Background/Accent Yellow */
    --background-accent-yellow-high: var(--color-accent-yellow-800);
    --background-accent-yellow-medium: var(--color-accent-yellow-500);
    --background-accent-yellow-low: var(--color-accent-yellow-300);
    --background-accent-yellow-lower: var(--color-accent-yellow-100);
    --background-accent-yellow-lowest: var(--color-accent-yellow-50);

    /* Background/Interactive/Primary */
    --background-interactive-primary-default: var(--color-neutral-black);
    --background-interactive-primary-hover: var(--color-primary-700);
    --background-interactive-primary-pressed: var(--color-primary-800);

    /* Background/Interactive/Secondary */
    --background-interactive-secondary-default: var(--color-primary-50);
    --background-interactive-secondary-hover: var(--color-neutral-200);
    --background-interactive-secondary-pressed: var(--color-neutral-300);

    /* Background/Interactive/Tertiary */
    --background-interactive-tertiary-default: var(--color-primary-50);
    --background-interactive-tertiary-hover: var(--color-primary-100);
    --background-interactive-tertiary-pressed: var(--color-primary-200);

    /* Background/Interactive/Accent Blue Dark */
    --background-interactive-accent-blue-dark-default: var(--color-accent-blue-300);
    --background-interactive-accent-blue-dark-hover: var(--color-accent-blue-200);
    --background-interactive-accent-blue-dark-pressed: var(--color-accent-blue-100);

    /* Background/Interactive/Accent Blue Light */
    --background-interactive-accent-blue-light-default: var(--color-accent-blue-200);
    --background-interactive-accent-blue-light-hover: var(--color-accent-blue-100);
    --background-interactive-accent-blue-light-pressed: var(--color-accent-blue-50);

    /* Background/Interactive/Accent Yellow Dark */
    --background-interactive-accent-yellow-dark-default: var(--color-accent-yellow-500);
    --background-interactive-accent-yellow-dark-hover: var(--color-accent-yellow-400);
    --background-interactive-accent-yellow-dark-pressed: var(--color-accent-yellow-300);

    /* Background/Interactive/Accent Yellow Light */
    --background-interactive-accent-yellow-light-default: var(--color-accent-yellow-300);
    --background-interactive-accent-yellow-light-hover: var(--color-accent-yellow-200);
    --background-interactive-accent-yellow-light-pressed: var(--color-accent-yellow-100);

    /* Background/Interactive/Error */
    --background-interactive-error-default: var(--color-red-700);
    --background-interactive-error-hover: var(--color-red-600);
    --background-interactive-error-pressed: var(--color-red-500);

    /* Background/Severity/Info */
    --background-severity-info-high: var(--color-blue-500);
    --background-severity-info-low: var(--color-blue-50);

    /* Background/Severity/Success */
    --background-severity-success-high: var(--color-green-500);
    --background-severity-success-low: var(--color-green-50);

    /* Background/Severity/Warning */
    --background-severity-warning-high: var(--color-yellow-500);
    --background-severity-warning-low: var(--color-yellow-50);

    /* Background/Severity/Error */
    --background-severity-error-high: var(--color-red-500);
    --background-severity-error-low: var(--color-red-50);

    /* Background/Disabled */
    --background-disabled-low: var(--color-neutral-50);
    --background-disabled-high: var(--color-neutral-400);

    /* Border/Regular */
    --border-regular-high: var(--color-neutral-600);
    --border-regular-medium: var(--color-neutral-400);
    --border-regular-low: var(--color-neutral-200);
    --border-regular-white: var(--color-neutral-white);
    --border-regular-black: var(--color-neutral-black);

    /* Border/Accent Blue */
    --border-accent-blue-higher: var(--color-accent-blue-800);
    --border-accent-blue-high: var(--color-accent-blue-700);
    --border-accent-blue-medium: var(--color-accent-blue-500);
    --border-accent-blue-low: var(--color-accent-blue-300);
    --border-accent-blue-lower: var(--color-accent-blue-200);
    --border-accent-blue-lowest: var(--color-accent-blue-50);

    /* Border/Severity/Info */
    --border-severity-info-high: var(--color-blue-700);
    --border-severity-info-low: var(--color-blue-200);

    /* Border/Severity/Success */
    --border-severity-success-high: var(--color-green-700);
    --border-severity-success-low: var(--color-green-200);

    /* Border/Severity/Warning */
    --border-severity-warning-high: var(--color-yellow-700);
    --border-severity-warning-low: var(--color-yellow-200);

    /* Border/Severity/Error */
    --border-severity-error-high: var(--color-red-700);
    --border-severity-error-low: var(--color-red-200);
}