:root {
    --theme-direction: 1;
    --theme-bg-brightness: 1;

    /*
     * Dark theme is intentionally extremely dim (field agents in complete
     * darkness). Do not raise dark-mode contrast, invert faded luminance
     * around 0.5, or swap form text to --content-color. Leave content dim
     * as set. --content-color-dark is the correct control/label foreground
     * in both themes (dark ink in light mode; dim ink in dark mode).
     */

    /* --brand-base: oklch(var(--brand-luminance) var(--brand-chroma) var(--brand-hue));
    --brand-base-faded: oklch(var(--brand-luminance-faded) var(--brand-chroma-faded) var(--brand-hue));
    --brand-base-dark: oklch(var(--brand-luminance-dark) var(--brand-chroma-dark) var(--brand-hue)); */

    /* Base color stays relatively stable, but gets slightly darker in dark mode for contrast */
    --brand-base: oklch(
        calc(var(--brand-luminance) - (0.15 * (1 - var(--theme-direction)))) 
        var(--brand-chroma) 
        var(--brand-hue)
    );

    /* Faded background: slight dim via --theme-direction. Do not invert
       around 0.5 (that blows out light-mode contrast and brightens dark). */
    --brand-base-faded: oklch(
        calc(var(--brand-luminance-faded) * 1 - (0.15 * (1 - var(--theme-direction))))
        var(--brand-chroma-faded)
        var(--brand-hue)
    );

    /* Dark accent/border color */
    --brand-base-bright: oklch(
        calc(var(--brand-luminance-dark) * 1.1 - (0.15 * (1 - var(--theme-direction)))) 
        var(--brand-chroma-dark) 
        var(--brand-hue)
    );
    --brand-base-dark: oklch(
        calc(var(--brand-luminance-dark) * .8 - (0.15 * (1 - var(--theme-direction)))) 
        var(--brand-chroma-dark) 
        var(--brand-hue)
    );
    --brand-base-darker: oklch(
        calc(var(--brand-luminance-dark) * .5 - (0.15 * (1 - var(--theme-direction)))) 
        var(--brand-chroma-dark) 
        var(--brand-hue)
    );

    /* whole-article wrapper on a page */
    --brand-base-mid-semi: oklch(
        calc(var(--brand-luminance-dark) - .2 - (0.19 * (1 - var(--theme-direction)))) 
        var(--brand-chroma-dark) 
        var(--brand-hue)
        / .9
    );

    /* general foreground color */
    --brand-base-color: oklch(
        calc(var(--brand-luminance-bright) - (0.19 * (1 - var(--theme-direction)))) 
        var(--brand-chroma) 
        var(--brand-hue)
    );

    --content-background-color: var(--brand-base);
    --content-background-color-faded: var(--brand-base-faded);
    --content-background-color-dark: var(--brand-base-dark);
    --content-background-color-darker: var(--brand-base-darker);
    --content-border-color-faded: var(--brand-base-faded);
    --content-color: var(--brand-base-color);
    --content-color-dark: var(--brand-base-dark);
    --content-color-medium-dark: oklch(from var(--content-color) calc(l - 0.4) c h);
    --content-color-bright: var(--brand-base-bright);
    --content-color-medium-bright: oklch(from var(--content-color) calc(l - 0.1) c h);

    --content-border-color: var(--brand-base);
    --content-border-size: 2px;
    --content-border-style: solid;
    --content-border: var(--content-border-size) var(--content-border-style) var(--content-border-color);
    --content-border-radius: .5ch;

    --article-background-color: var(--brand-base-mid-semi);
    --card-background-color: var(--brand-base-faded);

    --button-background-color: var(--brand-base);
    --button-background-color-inset: var(--brand-base-dark);
    --button-border-color: var(--brand-base-dark);
    --button-border-size: 1px;
    --button-border-style: solid;
    --button-border: var(--button-border-size) var(--button-border-style) var(--button-border-color);
    --button-border-radius: .5ch;
    --button-color: var(--content-color);
    --button-color-bright: var(--content-color-bright);

    --chip-background-color: var(--brand-base-faded);
    --chip-border-color: var(--brand-base-dark);
    --chip-border-size: 1px;
    --chip-border-style: solid;
    --chip-border: var(--chip-border-size) var(--chip-border-style) var(--chip-border-color);
    --chip-border-radius: .5ch;

    --button-background-color-faded: var(--brand-base-faded);

    --step-number-background-color: oklch(from var(--brand-base) calc(l + 0.45) calc(c - 0.05) h);
    --step-number-text-color: var(--brand-base);
    --step-number-border-color: var(--brand-base);
    --step-number-border-size: 1px;
    --step-number-border-style: solid;
    --step-number-border-width: .2ch .5ch .01ch .01ch;
    --step-number-border: var(--step-number-border-size) var(--step-number-border-style) var(--step-number-border-color);
    --step-number-border-radius: .5ch;

    --table-background-color: var(--brand-base-darker);
    --table-border-color: var(--brand-base-dark);
    --table-border-size: 1px;
    --table-border-style: solid;
    --table-border: var(--table-border-size) var(--table-border-style) var(--table-border-color);
    --table-border-radius: var(--content-border-radius);
    --table-color: var(--content-color);
    --table-color-dark: var(--content-color-dark);
    --table-row-background-color-odd: oklch(from var(--table-background-color) calc(l + 0.05) c h);
    --table-row-background-color-even: oklch(from var(--table-background-color) calc(l - 0.05) c h);

    --footer-background-color: var(--brand-base-darker);
    --footer-color: var(--content-color);
    --footer-color-dark: var(--content-color-dark);
    --footer-border-color: var(--brand-base-dark);
    --footer-border-size: 1px;
    --footer-border-style: solid;
    --footer-border: var(--footer-border-size) var(--footer-border-style) var(--footer-border-color);
    --footer-border-radius: var(--content-border-radius);
}

[data-theme="dark"] {
    --theme-direction: -1;        /* Tells calc to subtract instead of add */
    --theme-bg-brightness: -1;    /* Do not invert faded to ~0.10; dark stays dim */
}

[data-theme="light"] {
    --theme-direction: 1;        /* Tells calc to add instead of subtract */
    --theme-bg-brightness: 1;    /* Leaves the faded luminance as is (0.90 stays 0.90) */
}

[data-site='anchorbooting.com'] {
    --brand-luminance: 0.70;
    --brand-chroma: 0.07;
    --brand-hue: 199;

    --brand-luminance-faded: 0.90;
    --brand-chroma-faded: 0.02;
    --brand-luminance-dark: 0.50;
    --brand-chroma-dark: 0.07;

    --brand-luminance-bright: 0.92;
}

[data-site='pr.blue-labs.org'] {
    /* backgrounds */
    --brand-luminance: 0.50;
    --brand-chroma: 0.07;
    --brand-hue: 247;

    --brand-luminance-faded: 0.90;
    --brand-chroma-faded: 0.02;
    --brand-luminance-dark: 0.50;
    --brand-chroma-dark: 0.07;

    --brand-luminance-bright: 0.92;
}

