@layer colors {

:root {
    --white: #fff;
    --dark-gray: #333;
    --mid-gray: #666;

    /* ── Nav-Farben ── */
    --color-near-black: #111;
    --color-mid: #444;
    --color-dim: #888;
    --nav-border: #ddd;
    --scrollbar-track: #e0e0e0;
    --scrollbar-thumb: #999;
    --tab-hover-bg: #d0d0d0;

    /* ── Shadow-Tokens ── */
    --shadow-xs:          0 1px 2px rgba(0, 0, 0, 0.08);
    --shadow-sm:          0 2px 8px rgba(0, 0, 0, 0.10);
    --shadow-card:        0 2px 8px rgba(0, 0, 0, 0.13);
    --shadow-md:          0 4px 16px rgba(0, 0, 0, 0.10);
    --shadow-lg:          0 8px 32px rgba(0, 0, 0, 0.18);
    --shadow-xl:          0 20px 60px rgba(0, 0, 0, 0.30);
    --shadow-raise:       0 4px 24px rgba(0, 0, 0, 0.08);
    --shadow-widget:      0 2px 8px rgba(0,0,0,0.10), 0 1px 3px rgba(0,0,0,0.06);
    --shadow-widget-hover: 0 4px 16px rgba(0,0,0,0.13), 0 2px 6px rgba(0,0,0,0.07);
    --shadow-blue-hover:  0 6px 16px rgba(89, 107, 149, 0.25);
}

.normal {
    --green: #87bc45;
    --dark-green: #257107;
    --yellow: #ffdd00;
    --orange: #f3ac08;
    --red: #ea5545;
    --strong-red: #d90000;
    --grey: #d9d9d9;
    --dark-grey: #979797;
    --light-green: #f7fff0;
    --light-yellow: #f8e8c3;
    --light-red: #fff9f0;
    --font-base: #303345;
    --font-grey: #777;
    --font-light: #e8e8e8;
    --font-accent: #809ad5;
    --font-highlight: #5e8ffe;
    --font-lighthover: #ADD8E6;
    --data-blue-1: #809ad5;
    --data-blue-2: #596b95;
    --data-blue-3: #3f4252;
    --data-blue-4: #76f2fd;
    --data-blue-5: #1f8cd5;
    --data-blue-6: #1fc0cf;
    --bg-color: #edecea;
    --nav-bg: #f7f7f7;
    --border-color: #e8e8e8;
    --surface-color: #f0eef2;
    --dark-surface-color: #d3d0d0;
    --dropdown-item-hover-bg: rgba(89, 107, 149, 0.12);
    --dropdown-toggle-hover-bg: rgba(89, 107, 149, 0.05);
    --dropdown-selected-bg: rgba(0, 86, 179, 0.1);
    --shadow-focus:    0 0 0 2px rgba(89, 107, 149, 0.15);
    --shadow-focus-lg: 0 0 0 3px rgba(89, 107, 149, 0.10);
}

.accessible {
    --green: #77a844;
    --strong-red: #d90000;
    --dark-green: #476126;
    --yellow: #CCCA3C;
    --red: #CFA24C;
    --grey: #d9d9d9;
    --dark-grey: #979797;
    --light-green: #fff;
    --light-yellow: #fff;
    --light-red: #fff;
    --font-base: #303345;
    --font-grey: #777;
    --font-light: #e8e8e8;
    --font-accent: #000;
    --font-highlight: #000;
    --font-lighthover: #ADD8E6;
    --data-blue-1: #369988;
    --data-blue-2: #5D9F78;
    --data-blue-3: #77A844;
    --data-blue-4: #8cf460;
    --data-blue-5: #14a522;
    --data-blue-6: #8cf460;
    --bg-color: #edecea;
    --nav-bg: #f7f7f7;
    --border-color: #e8e8e8;
    --surface-color: #f0eef2;
    --dark-surface-color: #d3d0d0;
    --dropdown-item-hover-bg: rgba(93, 159, 120, 0.12);
    --dropdown-toggle-hover-bg: rgba(93, 159, 120, 0.05);
    --dropdown-selected-bg: rgba(93, 159, 120, 0.1);
    --shadow-focus:    0 0 0 2px rgba(93, 159, 120, 0.15);
    --shadow-focus-lg: 0 0 0 3px rgba(93, 159, 120, 0.10);
}


@keyframes col-blank-green-anim {
    0%   { background-color: color-mix(in srgb, 15% var(--yellow), var(--white)); }
    20%  { background-color: var(--white); }
    50%  { background-color: color-mix(in srgb, 35% var(--green), var(--white)); }
    100% { background-color: var(--white); }
}

} /* @layer colors */