/*
 * SelfService theme semantic color tokens — derived states.
 *
 * The *-default tokens for each color are set directly by
 * ConfiguredRootVariables.css (served dynamically from the database).
 * This file derives hover, pressed, focused, and container variants
 * from those defaults using color-mix(in oklab).
 *
 * Token naming follows the BrandSync semantic convention:
 *   --color-{category}-{state}
 * Categories: primary, neutrals, success, error, information
 * (warning has no brand input and is defined only in Variables.css)
 *
 * color-mix() in oklab provides perceptually uniform blending.
 * Variables.css provides the static fallback values used when no brand
 * color has been configured or when the browser does not support color-mix.
 *
 * 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 {
    /* === Primary === */
    --color-primary-hover:               color-mix(in oklab, var(--color-primary-default) 75%, black);
    --color-primary-pressed:             color-mix(in oklab, var(--color-primary-default) 50%, black);
    --color-primary-focused:             var(--color-primary-default);
    --color-primary-container:           color-mix(in oklab, var(--color-primary-default) 17%, white);
    --color-primary-container-hover:     color-mix(in oklab, var(--color-primary-default) 33%, white);

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

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

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

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