/*
 * SelfService theme semantic color tokens.
 *
 * Derived at paint time from the raw brand colors in
 * BrandSync/ConfiguredRootVariables.css (served dynamically).
 *
 * Names follow a numbered scheme (color-1 through color-5) rather than
 * semantic role names, since the exact usage of each slot is still being
 * defined as components are built.
 *
 * color-mix() in oklab provides perceptually uniform blending.
 * BrandSync/Variables.css provides the static fallback values
 * used when no brand color has been configured.
 *
 * Warning role is intentionally excluded: there is no --brand-color-* input
 * for warning, so warning tokens are defined only as static values in Variables.css.
 *
 * Browser support: color-mix(in oklab) requires Chrome 111+, Firefox 113+,
 * Safari 16.2+. The @supports block below ensures these declarations are only
 * applied in supporting browsers; Variables.css static fallbacks remain active
 * for all others regardless of load order.
 */

@supports (color: color-mix(in oklab, red, blue)) {
:root {
    /* === Color 1 === */
    --color-1-default:             var(--brand-color-1);
    --color-1-hover:               color-mix(in oklab, var(--brand-color-1) 75%, black);
    --color-1-pressed:             color-mix(in oklab, var(--brand-color-1) 50%, black);
    --color-1-focused:             var(--brand-color-1);
    --color-1-container:           color-mix(in oklab, var(--brand-color-1) 17%, white);
    --color-1-container-hover:     color-mix(in oklab, var(--brand-color-1) 33%, white);

    /* === Color 2 === */
    --color-2-default:            var(--brand-color-2);
    --color-2-hover:              color-mix(in oklab, var(--brand-color-2) 75%, black);
    --color-2-pressed:            color-mix(in oklab, var(--brand-color-2) 50%, black);
    --color-2-focused:            var(--brand-color-2);
    --color-2-container:          color-mix(in oklab, var(--brand-color-2)  3%, white);
    --color-2-container-hover:    color-mix(in oklab, var(--brand-color-2)  8%, white);
    --color-2-container-focused:  color-mix(in oklab, var(--brand-color-2) 17%, white);
    --color-2-container-pressed:  color-mix(in oklab, var(--brand-color-2) 33%, white);

    /* === Color 3 === */
    --color-3-default:             var(--brand-color-3);
    --color-3-hover:               color-mix(in oklab, var(--brand-color-3) 75%, black);
    --color-3-pressed:             color-mix(in oklab, var(--brand-color-3) 50%, black);
    --color-3-focused:             var(--brand-color-3);
    --color-3-container:           color-mix(in oklab, var(--brand-color-3) 17%, white);
    --color-3-container-hover:     color-mix(in oklab, var(--brand-color-3) 33%, white);

    /* === Color 4 === */
    --color-4-default:               var(--brand-color-4);
    --color-4-hover:                 color-mix(in oklab, var(--brand-color-4)   75%, black);
    --color-4-pressed:               color-mix(in oklab, var(--brand-color-4)   50%, black);
    --color-4-focused:               var(--brand-color-4);
    --color-4-container:             color-mix(in oklab, var(--brand-color-4)   17%, white);
    --color-4-container-hover:       color-mix(in oklab, var(--brand-color-4)   33%, white);

    /* === Color 5 === */
    --color-5-default:         var(--brand-color-5);
    --color-5-hover:           color-mix(in oklab, var(--brand-color-5) 75%, black);
    --color-5-pressed:         color-mix(in oklab, var(--brand-color-5) 50%, black);
    --color-5-focused:         var(--brand-color-5);
    --color-5-container:       color-mix(in oklab, var(--brand-color-5) 17%, white);
    --color-5-container-hover: color-mix(in oklab, var(--brand-color-5) 33%, white);
}
}