/*
 * 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, warning, error, information
 *
 * 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);

    /* === Warning === */
    --color-warning-hover:               color-mix(in oklab, var(--color-warning-default) 75%, black);
    --color-warning-pressed:             color-mix(in oklab, var(--color-warning-default) 50%, black);
    --color-warning-focused:             var(--color-warning-default);
    --color-warning-container:           color-mix(in oklab, var(--color-warning-default) 17%, white);
    --color-warning-container-hover:     color-mix(in oklab, var(--color-warning-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);
}
}

/*
 * Decorative tokens — general-purpose, not owned by any one component.
 * Six hues, 60° apart, rotated from the configured primary color in oklch (hue is a native
 * channel there, unlike oklab). Always resolvable from the existing --color-primary-default —
 * no separate fallback branch, unlike the *-default tokens above.
 *
 * Lightness/chroma are capped (not just carried over from the primary) because OKLCH's constant
 * perceptual lightness does not mean constant WCAG contrast across hues — WCAG luminance weighting
 * favours green/red over blue, so an uncapped rotation can swing contrast against light text from
 * ~7.5:1 down to under 3:1 on some hues. Verified empirically (real rendered pixels, not estimated):
 * capping at l=0.45/c=0.12 holds >=6.5:1 against white text across the full hue circle, both for the
 * repo's own default primary and a deliberately harsh stress-test primary.
 */
@supports (color: oklch(from red l c h)) {
:root {
    --color-decorative-1: oklch(from var(--color-primary-default) min(l, 0.45) min(c, 0.12) h);
    --color-decorative-2: oklch(from var(--color-primary-default) min(l, 0.45) min(c, 0.12) calc(h + 60));
    --color-decorative-3: oklch(from var(--color-primary-default) min(l, 0.45) min(c, 0.12) calc(h + 120));
    --color-decorative-4: oklch(from var(--color-primary-default) min(l, 0.45) min(c, 0.12) calc(h + 180));
    --color-decorative-5: oklch(from var(--color-primary-default) min(l, 0.45) min(c, 0.12) calc(h + 240));
    --color-decorative-6: oklch(from var(--color-primary-default) min(l, 0.45) min(c, 0.12) calc(h + 300));
}
}