/* Globals */

:root {
    --sidebar-target-width: 300px;
    --sidebar-width: min(var(--sidebar-target-width), 80vw);
    --sidebar-resize-indicator-width: 8px;
    --sidebar-resize-indicator-space: 2px;
    --page-padding: 15px;
    --content-max-width: 750px;
    --menu-bar-height: 50px;
    --code-font-size: 0.875em; /* please adjust the ace font size accordingly in editor.js */
    --searchbar-margin-block-start: 5px;
    
    /* LaunchDarkly Brand Fonts */
    --font-body: 'Söhne', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    --font-heading: 'Audimat 3000', 'Söhne', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    --font-code: 'Söhne Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    --mono-font: var(--font-code);
    
    /* Font weights */
    --font-body-weight-book: 400; /* Buch */
    --font-body-weight-kraeftig: 500; /* Kräftig */
    
    /* LaunchDarkly Brand Colors - Legacy mapping for compatibility */
    --ld-gray-03: #D1D3D4;
    --ld-blue-base: #405BFF;
    --ld-blue-04: #7084FF;
    --ld-gradient-yellow-blue: linear-gradient(to right, #EBFF38, #7084FF);
}

/* Light Theme */
.light, html:not(.js) {
    --bg: hsl(0, 0%, 100%);
    --fg: hsl(0, 0%, 0%);

    --sidebar-bg: #fafafa;
    --sidebar-fg: hsl(0, 0%, 0%);
    --sidebar-non-existant: #aaaaaa;
    --sidebar-active: #1f1fff;
    --sidebar-spacer: #f4f4f4;

    --scrollbar: #8F8F8F;

    --icons: #747474;
    --icons-hover: #000000;

    --links: var(--ld-blue-base); /* LaunchDarkly Blue Base for light mode */

    --inline-code-color: #301900;

    --theme-popup-bg: #fafafa;
    --theme-popup-border: #cccccc;
    --theme-hover: #e6e6e6;

    --quote-bg: hsl(197, 37%, 96%);
    --quote-border: hsl(197, 37%, 91%);

    --warning-border: #ff8e00;

    --table-border-color: hsl(0, 0%, 95%);
    --table-header-bg: var(--grayscale-2); /* Use grayscale-2 for subtle header background */
    --table-alternate-bg: var(--grayscale-1); /* Use grayscale-1 for alternating rows */
    --table-border: var(--grayscale-4); /* Use grayscale-4 for borders */

    --searchbar-border-color: #aaa;
    --searchbar-bg: #fafafa;
    --searchbar-fg: #000;
    --searchbar-shadow-color: #aaa;
    --searchresults-header-fg: #666;
    --searchresults-border-color: #888;
    --searchresults-li-bg: #e4f2fe;
    --search-mark-bg: #a2cff5;

    --color-scheme: light;

    /* Same as `--icons` */
    --copy-button-filter: invert(45.49%);
    /* Same as `--sidebar-active` */
    --copy-button-filter-hover: invert(14%) sepia(93%) saturate(4250%) hue-rotate(243deg) brightness(99%) contrast(130%);

    --footnote-highlight: #7e7eff;

    --overlay-bg: rgba(200, 200, 205, 0.4);

    /* LaunchDarkly Accent Colors (Light Mode) */
    --accent-1: #fdfdfe;
    --accent-2: #f6f9ff;
    --accent-3: #ecf2ff;
    --accent-4: #dee9ff;
    --accent-5: #cddeff;
    --accent-6: #bad0ff;
    --accent-7: #a3bdff;
    --accent-8: #83a2ff;
    --accent-9: #405bff;
    --accent-10: #3951e2;
    --accent-11: #3850e1;
    --accent-12: #1c2a67;
    --accent-a1: #00008002;
    --accent-a2: #0055ff09;
    --accent-a3: #0051ff13;
    --accent-a4: #0055ff21;
    --accent-a5: #0057ff32;
    --accent-a6: #0052ff45;
    --accent-a7: #0049ff5c;
    --accent-a8: #0040ff7c;
    --accent-a9: #0024ffbf;
    --accent-a10: #001fdac6;
    --accent-a11: #001fd9c7;
    --accent-a12: #001054e3;
    --accent-contrast: #fff;
    --accent-surface: #f4f8ffcc;
    --accent-indicator: #405bff;
    --accent-track: #405bff;

    /* LaunchDarkly Grayscale Colors (Light Mode) */
    --grayscale-1: #fdfcfd;
    --grayscale-2: #faf9fb;
    --grayscale-3: #f2eff3;
    --grayscale-4: #eae7ec;
    --grayscale-5: #e3dfe6;
    --grayscale-6: #dbd8e0;
    --grayscale-7: #d0cdd7;
    --grayscale-8: #bcbac7;
    --grayscale-9: #8e8c99;
    --grayscale-10: #84828e;
    --grayscale-11: #65636d;
    --grayscale-12: #211f26;
    --grayscale-a1: #55005503;
    --grayscale-a2: #2b005506;
    --grayscale-a3: #30004010;
    --grayscale-a4: #20003618;
    --grayscale-a5: #20003820;
    --grayscale-a6: #14003527;
    --grayscale-a7: #10003332;
    --grayscale-a8: #08003145;
    --grayscale-a9: #05001d73;
    --grayscale-a10: #0500197d;
    --grayscale-a11: #0400119c;
    --grayscale-a12: #020008e0;
    --grayscale-contrast: #000;
    --grayscale-surface: #ffffffcc;
    --grayscale-indicator: #8e8c99;
    --grayscale-track: #8e8c99;

    /* Semantic Color Mappings */
    --accent: rgba(64, 91, 255, 1);
    --background: rgba(255, 255, 255, 1);
    --border: initial;
    --sidebar-background: initial;
    --header-background: rgba(0, 0, 0, 1);
    --card-background: initial;
    --theme-color: #fff;
}

@supports (color: color(display-p3 1 1 1)) {
    @media (color-gamut: p3) {
        .light, html:not(.js) {
            --accent-1: oklch(99.4% 0.0019 269.3);
            --accent-2: oklch(98.3% 0.0102 269.3);
            --accent-3: oklch(96.1% 0.0218 269.3);
            --accent-4: oklch(93.5% 0.0429 269.3);
            --accent-5: oklch(90.3% 0.065 269.3);
            --accent-6: oklch(86.3% 0.0907 269.3);
            --accent-7: oklch(80.7% 0.1104 269.3);
            --accent-8: oklch(73% 0.1439 269.3);
            --accent-9: oklch(55.9% 0.2428 269.3);
            --accent-10: oklch(51.3% 0.2195 269.3);
            --accent-11: oklch(51% 0.2195 269.3);
            --accent-12: oklch(31.3% 0.1087 269.3);
            --accent-a1: color(display-p3 0.0196 0.0196 0.5098 / 0.008);
            --accent-a2: color(display-p3 0.0196 0.2667 0.8784 / 0.032);
            --accent-a3: color(display-p3 0.0078 0.2824 0.9451 / 0.071);
            --accent-a4: color(display-p3 0.0039 0.2941 0.9373 / 0.122);
            --accent-a5: color(display-p3 0.0039 0.2824 0.9373 / 0.185);
            --accent-a6: color(display-p3 0.0039 0.2627 0.9412 / 0.255);
            --accent-a7: color(display-p3 0.0039 0.2314 0.9451 / 0.342);
            --accent-a8: color(display-p3 0.0039 0.2039 0.9412 / 0.463);
            --accent-a9: color(display-p3 0 0.1098 0.9529 / 0.726);
            --accent-a10: color(display-p3 0 0.0941 0.8078 / 0.757);
            --accent-a11: color(display-p3 0 0.0941 0.8039 / 0.761);
            --accent-a12: color(display-p3 0 0.051 0.302 / 0.879);
            --accent-surface: color(display-p3 0.9608 0.9725 1 / 0.8);

            --grayscale-1: color(display-p3 0.991 0.988 0.992);
            --grayscale-2: color(display-p3 0.98 0.976 0.984);
            --grayscale-3: color(display-p3 0.946 0.938 0.952);
            --grayscale-4: color(display-p3 0.915 0.906 0.925);
            --grayscale-5: color(display-p3 0.886 0.876 0.901);
            --grayscale-6: color(display-p3 0.856 0.846 0.875);
            --grayscale-7: color(display-p3 0.814 0.804 0.84);
            --grayscale-8: color(display-p3 0.735 0.728 0.777);
            --grayscale-9: color(display-p3 0.555 0.549 0.596);
            --grayscale-10: color(display-p3 0.514 0.508 0.552);
            --grayscale-11: color(display-p3 0.395 0.388 0.424);
            --grayscale-12: color(display-p3 0.128 0.122 0.147);
            --grayscale-surface: color(display-p3 1 1 1 / 80%);
        }
    }
}

/* Dark Theme */
.dark {
    --bg: hsl(200, 7%, 8%);
    --fg: #98a3ad;

    --sidebar-bg: #292c2f;
    --sidebar-fg: #a1adb8;
    --sidebar-non-existant: #505254;
    --sidebar-active: #3473ad;
    --sidebar-spacer: #393939;

    --scrollbar: var(--sidebar-fg);

    --icons: #43484d;
    --icons-hover: #b3c0cc;

    --links: var(--ld-blue-04); /* LaunchDarkly Blue 04 for dark mode */

    --inline-code-color: #c5c8c6;

    --theme-popup-bg: #141617;
    --theme-popup-border: #43484d;
    --theme-hover: #1f2124;

    --quote-bg: hsl(234, 21%, 18%);
    --quote-border: hsl(234, 21%, 23%);

    --warning-border: #ff8e00;

    --table-border-color: hsl(200, 7%, 13%);
    --table-header-bg: var(--grayscale-3); /* Use grayscale-3 for dark mode header */
    --table-alternate-bg: var(--grayscale-2); /* Use grayscale-2 for dark mode alternating rows */
    --table-border: var(--grayscale-6); /* Use grayscale-6 for dark mode borders */

    --searchbar-border-color: #aaa;
    --searchbar-bg: #b7b7b7;
    --searchbar-fg: #000;
    --searchbar-shadow-color: #aaa;
    --searchresults-header-fg: #666;
    --searchresults-border-color: #98a3ad;
    --searchresults-li-bg: #2b2b2f;
    --search-mark-bg: #355c7d;

    --color-scheme: dark;

    /* Same as `--icons` */
    --copy-button-filter: invert(26%) sepia(8%) saturate(575%) hue-rotate(169deg) brightness(87%) contrast(82%);
    /* Same as `--sidebar-active` */
    --copy-button-filter-hover: invert(36%) sepia(70%) saturate(503%) hue-rotate(167deg) brightness(98%) contrast(89%);

    --footnote-highlight: #4079ae;

    --overlay-bg: rgba(33, 40, 48, 0.4);

    /* LaunchDarkly Accent Colors (Dark Mode) */
    --accent-1: #131828;
    --accent-2: #151b2e;
    --accent-3: #192555;
    --accent-4: #1d2c70;
    --accent-5: #243583;
    --accent-6: #2c3f94;
    --accent-7: #354ba9;
    --accent-8: #3e57c6;
    --accent-9: #405bff;
    --accent-10: #364bef;
    --accent-11: #94b2ff;
    --accent-12: #d3e1ff;
    --accent-a1: #000bfb11;
    --accent-a2: #002ff918;
    --accent-a3: #1947fe43;
    --accent-a4: #244bfe61;
    --accent-a5: #3156ff76;
    --accent-a6: #3c5ffe89;
    --accent-a7: #4669ffa0;
    --accent-a8: #4b6cffc0;
    --accent-a9: #405bff;
    --accent-a10: #384efeee;
    --accent-a11: #94b2ff;
    --accent-a12: #d3e1ff;
    --accent-contrast: #fff;
    --accent-surface: #121d4380;
    --accent-indicator: #405bff;
    --accent-track: #405bff;

    /* LaunchDarkly Grayscale Colors (Dark Mode) */
    --grayscale-1: #111111;
    --grayscale-2: #191919;
    --grayscale-3: #222222;
    --grayscale-4: #2a2a2a;
    --grayscale-5: #313131;
    --grayscale-6: #3a3a3a;
    --grayscale-7: #484848;
    --grayscale-8: #606060;
    --grayscale-9: #6e6e6e;
    --grayscale-10: #7b7b7b;
    --grayscale-11: #b4b4b4;
    --grayscale-12: #eeeeee;
    --grayscale-a1: #00000000;
    --grayscale-a2: #ffffff09;
    --grayscale-a3: #ffffff12;
    --grayscale-a4: #ffffff1b;
    --grayscale-a5: #ffffff22;
    --grayscale-a6: #ffffff2c;
    --grayscale-a7: #ffffff3b;
    --grayscale-a8: #ffffff55;
    --grayscale-a9: #ffffff64;
    --grayscale-a10: #ffffff72;
    --grayscale-a11: #ffffffaf;
    --grayscale-a12: #ffffffed;
    --grayscale-contrast: #fff;
    --grayscale-surface: rgba(0, 0, 0, 0.05);
    --grayscale-indicator: #6e6e6e;
    --grayscale-track: #6e6e6e;

    /* Semantic Color Mappings */
    --accent: rgba(64, 91, 255, 1);
    --background: rgba(25, 25, 25, 1);
    --border: initial;
    --sidebar-background: initial;
    --header-background: rgba(0, 0, 0, 1);
    --card-background: initial;
    --theme-color: #191919;
}

@supports (color: color(display-p3 1 1 1)) {
    @media (color-gamut: p3) {
        .dark {
            --accent-1: oklch(21.3% 0.0314 269.3);
            --accent-2: oklch(22.6% 0.0384 269.3);
            --accent-3: oklch(28.4% 0.088 269.3);
            --accent-4: oklch(32.6% 0.1184 269.3);
            --accent-5: oklch(36.5% 0.1328 269.3);
            --accent-6: oklch(40.5% 0.1405 269.3);
            --accent-7: oklch(45.1% 0.1527 269.3);
            --accent-8: oklch(50.3% 0.1743 269.3);
            --accent-9: oklch(55.9% 0.2428 269.3);
            --accent-10: oklch(51.3% 0.2428 269.3);
            --accent-11: oklch(77.7% 0.1566 269.3);
            --accent-12: oklch(91.1% 0.0544 269.3);
            --accent-a1: color(display-p3 0 0.0353 1 / 0.061);
            --accent-a2: color(display-p3 0 0.1882 1 / 0.087);
            --accent-a3: color(display-p3 0.1333 0.2902 1 / 0.248);
            --accent-a4: color(display-p3 0.1765 0.3059 1 / 0.361);
            --accent-a5: color(display-p3 0.2353 0.349 1 / 0.44);
            --accent-a6: color(display-p3 0.2745 0.3804 1 / 0.514);
            --accent-a7: color(display-p3 0.3137 0.4196 1 / 0.6);
            --accent-a8: color(display-p3 0.3255 0.4314 1 / 0.722);
            --accent-a9: color(display-p3 0.2824 0.3647 1 / 0.961);
            --accent-a10: color(display-p3 0.2431 0.3137 1 / 0.892);
            --accent-a11: color(display-p3 0.6157 0.7098 1 / 0.974);
            --accent-a12: color(display-p3 0.851 0.8941 1 / 0.987);
            --accent-surface: color(display-p3 0.0745 0.1098 0.251 / 0.5);

            --grayscale-1: color(display-p3 0.067 0.067 0.067);
            --grayscale-2: color(display-p3 0.098 0.098 0.098);
            --grayscale-3: color(display-p3 0.135 0.135 0.135);
            --grayscale-4: color(display-p3 0.163 0.163 0.163);
            --grayscale-5: color(display-p3 0.192 0.192 0.192);
            --grayscale-6: color(display-p3 0.228 0.228 0.228);
            --grayscale-7: color(display-p3 0.283 0.283 0.283);
            --grayscale-8: color(display-p3 0.375 0.375 0.375);
            --grayscale-9: color(display-p3 0.431 0.431 0.431);
            --grayscale-10: color(display-p3 0.484 0.484 0.484);
            --grayscale-11: color(display-p3 0.706 0.706 0.706);
            --grayscale-12: color(display-p3 0.933 0.933 0.933);
            --grayscale-surface: color(display-p3 0 0 0 / 5%);
        }
    }
}

/* Media query for prefers-color-scheme: dark */
@media (prefers-color-scheme: dark) {
    html:not(.js) {
        --bg: hsl(200, 7%, 8%);
        --fg: #98a3ad;

        --sidebar-bg: #292c2f;
        --sidebar-fg: #a1adb8;
        --sidebar-non-existant: #505254;
        --sidebar-active: #3473ad;
        --sidebar-spacer: #393939;

        --scrollbar: var(--sidebar-fg);

        --icons: #43484d;
        --icons-hover: #b3c0cc;

        --links: var(--ld-blue-04); /* LaunchDarkly Blue 04 for dark mode */

        --inline-code-color: #c5c8c6;

        --theme-popup-bg: #141617;
        --theme-popup-border: #43484d;
        --theme-hover: #1f2124;

        --quote-bg: hsl(234, 21%, 18%);
        --quote-border: hsl(234, 21%, 23%);

        --warning-border: #ff8e00;

        --table-border-color: hsl(200, 7%, 13%);
        --table-header-bg: var(--grayscale-3); /* Use grayscale-3 for dark mode header */
        --table-alternate-bg: var(--grayscale-2); /* Use grayscale-2 for dark mode alternating rows */
        --table-border: var(--grayscale-6); /* Use grayscale-6 for dark mode borders */

        --searchbar-border-color: #aaa;
        --searchbar-bg: #b7b7b7;
        --searchbar-fg: #000;
        --searchbar-shadow-color: #aaa;
        --searchresults-header-fg: #666;
        --searchresults-border-color: #98a3ad;
        --searchresults-li-bg: #2b2b2f;
        --search-mark-bg: #355c7d;

        --color-scheme: dark;

        /* Same as `--icons` */
        --copy-button-filter: invert(26%) sepia(8%) saturate(575%) hue-rotate(169deg) brightness(87%) contrast(82%);
        /* Same as `--sidebar-active` */
        --copy-button-filter-hover: invert(36%) sepia(70%) saturate(503%) hue-rotate(167deg) brightness(98%) contrast(89%);

        /* LaunchDarkly Accent Colors (Dark Mode) */
        --accent-1: #131828;
        --accent-2: #151b2e;
        --accent-3: #192555;
        --accent-4: #1d2c70;
        --accent-5: #243583;
        --accent-6: #2c3f94;
        --accent-7: #354ba9;
        --accent-8: #3e57c6;
        --accent-9: #405bff;
        --accent-10: #364bef;
        --accent-11: #94b2ff;
        --accent-12: #d3e1ff;
        --accent-a1: #000bfb11;
        --accent-a2: #002ff918;
        --accent-a3: #1947fe43;
        --accent-a4: #244bfe61;
        --accent-a5: #3156ff76;
        --accent-a6: #3c5ffe89;
        --accent-a7: #4669ffa0;
        --accent-a8: #4b6cffc0;
        --accent-a9: #405bff;
        --accent-a10: #384efeee;
        --accent-a11: #94b2ff;
        --accent-a12: #d3e1ff;
        --accent-contrast: #fff;
        --accent-surface: #121d4380;
        --accent-indicator: #405bff;
        --accent-track: #405bff;

        /* LaunchDarkly Grayscale Colors (Dark Mode) */
        --grayscale-1: #111111;
        --grayscale-2: #191919;
        --grayscale-3: #222222;
        --grayscale-4: #2a2a2a;
        --grayscale-5: #313131;
        --grayscale-6: #3a3a3a;
        --grayscale-7: #484848;
        --grayscale-8: #606060;
        --grayscale-9: #6e6e6e;
        --grayscale-10: #7b7b7b;
        --grayscale-11: #b4b4b4;
        --grayscale-12: #eeeeee;
        --grayscale-a1: #00000000;
        --grayscale-a2: #ffffff09;
        --grayscale-a3: #ffffff12;
        --grayscale-a4: #ffffff1b;
        --grayscale-a5: #ffffff22;
        --grayscale-a6: #ffffff2c;
        --grayscale-a7: #ffffff3b;
        --grayscale-a8: #ffffff55;
        --grayscale-a9: #ffffff64;
        --grayscale-a10: #ffffff72;
        --grayscale-a11: #ffffffaf;
        --grayscale-a12: #ffffffed;
        --grayscale-contrast: #fff;
        --grayscale-surface: rgba(0, 0, 0, 0.05);
        --grayscale-indicator: #6e6e6e;
        --grayscale-track: #6e6e6e;

        /* Semantic Color Mappings */
        --accent: rgba(64, 91, 255, 1);
        --background: rgba(25, 25, 25, 1);
        --border: initial;
        --sidebar-background: initial;
        --header-background: rgba(0, 0, 0, 1);
        --card-background: initial;
        --theme-color: #191919;
    }
}

@supports (color: color(display-p3 1 1 1)) {
    @media (color-gamut: p3) and (prefers-color-scheme: dark) {
        html:not(.js) {
            --accent-1: oklch(21.3% 0.0314 269.3);
            --accent-2: oklch(22.6% 0.0384 269.3);
            --accent-3: oklch(28.4% 0.088 269.3);
            --accent-4: oklch(32.6% 0.1184 269.3);
            --accent-5: oklch(36.5% 0.1328 269.3);
            --accent-6: oklch(40.5% 0.1405 269.3);
            --accent-7: oklch(45.1% 0.1527 269.3);
            --accent-8: oklch(50.3% 0.1743 269.3);
            --accent-9: oklch(55.9% 0.2428 269.3);
            --accent-10: oklch(51.3% 0.2428 269.3);
            --accent-11: oklch(77.7% 0.1566 269.3);
            --accent-12: oklch(91.1% 0.0544 269.3);
            --accent-a1: color(display-p3 0 0.0353 1 / 0.061);
            --accent-a2: color(display-p3 0 0.1882 1 / 0.087);
            --accent-a3: color(display-p3 0.1333 0.2902 1 / 0.248);
            --accent-a4: color(display-p3 0.1765 0.3059 1 / 0.361);
            --accent-a5: color(display-p3 0.2353 0.349 1 / 0.44);
            --accent-a6: color(display-p3 0.2745 0.3804 1 / 0.514);
            --accent-a7: color(display-p3 0.3137 0.4196 1 / 0.6);
            --accent-a8: color(display-p3 0.3255 0.4314 1 / 0.722);
            --accent-a9: color(display-p3 0.2824 0.3647 1 / 0.961);
            --accent-a10: color(display-p3 0.2431 0.3137 1 / 0.892);
            --accent-a11: color(display-p3 0.6157 0.7098 1 / 0.974);
            --accent-a12: color(display-p3 0.851 0.8941 1 / 0.987);
            --accent-surface: color(display-p3 0.0745 0.1098 0.251 / 0.5);

            --grayscale-1: color(display-p3 0.067 0.067 0.067);
            --grayscale-2: color(display-p3 0.098 0.098 0.098);
            --grayscale-3: color(display-p3 0.135 0.135 0.135);
            --grayscale-4: color(display-p3 0.163 0.163 0.163);
            --grayscale-5: color(display-p3 0.192 0.192 0.192);
            --grayscale-6: color(display-p3 0.228 0.228 0.228);
            --grayscale-7: color(display-p3 0.283 0.283 0.283);
            --grayscale-8: color(display-p3 0.375 0.375 0.375);
            --grayscale-9: color(display-p3 0.431 0.431 0.431);
            --grayscale-10: color(display-p3 0.484 0.484 0.484);
            --grayscale-11: color(display-p3 0.706 0.706 0.706);
            --grayscale-12: color(display-p3 0.933 0.933 0.933);
            --grayscale-surface: color(display-p3 0 0 0 / 5%);
        }
    }
}