/*
 * 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);
    --color-primary-text:                color-mix(in oklab, var(--color-primary-default) 50%, black);

    /* === 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);
    --color-success-text:                color-mix(in oklab, var(--color-success-default) 50%, black);

    /* === 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);
    --color-warning-text:                color-mix(in oklab, var(--color-warning-default) 50%, black);

    /* === 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);
    --color-error-text:                  color-mix(in oklab, var(--color-error-default) 50%, black);

    /* === 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);
    --color-information-text:            color-mix(in oklab, var(--color-information-default) 50%, black);
}
}

/*
 * 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));
}
}

/*
 * Text-on-light tokens: the role's own hue with oklch lightness capped at 0.37, which holds
 * >= 7:1 against the role's -container tint and the neutral card for any configured colour
 * (a pale customer yellow included). Overrides the color-mix(50% black) tier above, which
 * also passes but turns an already dark colour near-black.
 */
@supports (color: oklch(from red l c h)) {
:root {
    --color-primary-text: oklch(from var(--color-primary-default) min(l, 0.37) c h);
    --color-success-text: oklch(from var(--color-success-default) min(l, 0.37) c h);
    --color-warning-text: oklch(from var(--color-warning-default) min(l, 0.37) c h);
    --color-error-text: oklch(from var(--color-error-default) min(l, 0.37) c h);
    --color-information-text: oklch(from var(--color-information-default) min(l, 0.37) c h);
}
}

/*
 * Text-on-fill tokens: white or black, approximating the higher-contrast choice for the primary fill
 * by switching at oklch lightness 0.57 (not WCAG luminance, so a few hues pick the lower one). Hover and pressed have their own tokens because those fills are darker
 * than -default and can flip the better choice. Use for text or icons placed on
 * --color-primary-default / -hover / -pressed, never on a -container tint.
 */
@supports (color: oklch(from red l c h)) {
:root {
    --color-on-primary: oklch(from var(--color-primary-default) clamp(0, (0.57 - l) * 1000, 1) 0 h);
    --color-on-primary-hover: oklch(from var(--color-primary-hover) clamp(0, (0.57 - l) * 1000, 1) 0 h);
    --color-on-primary-pressed: oklch(from var(--color-primary-pressed) clamp(0, (0.57 - l) * 1000, 1) 0 h);
}
}

/*
 * Form control border: the neutral's hue at a fixed oklch lightness of 0.56, which holds >= 3:1
 * against the neutral card and the page background for any configured neutral, pure black included.
 */
@supports (color: oklch(from red l c h)) {
:root {
    --color-neutrals-border: oklch(from var(--color-neutrals-default) 0.56 min(c, 0.04) h);
}
}