:root {
    /* Semantic home card colors */
    --home-card-blue: var(--primary-color);
    --home-card-teal: var(--teal-500);
    --home-card-cyan: var(--cyan-500);
    --home-card-orange: var(--orange-500);
    --home-card-grey: var(--gray-500);

    /* Light-theme card behaviour */
    --home-card-accent-start: 20%;
    --home-card-accent-end: 7%;

    --home-card-border-strength: 24%;
    --home-card-border-hover-strength: 42%;

    --home-card-shadow-strength: 10%;
    --home-card-shadow-hover-strength: 16%;

    --home-card-glow-strength: 13%;
    --home-card-icon-background-strength: 16%;

    --home-card-radius: 1.25rem;
}

:root {
    --app-card-background:
            color-mix(
                    in srgb,
                    var(--surface-card) 94%,
                    var(--primary-color)
            );

    --app-card-border:
            color-mix(
                    in srgb,
                    var(--surface-border) 75%,
                    var(--primary-color)
            );

    --app-card-border-hover:
            color-mix(
                    in srgb,
                    var(--surface-border) 45%,
                    var(--primary-color)
            );

    --app-card-shadow:
            0 1px 2px rgba(0, 0, 0, 0.16),
            0 10px 28px rgba(0, 0, 0, 0.18);

    --app-card-shadow-hover:
            0 4px 10px rgba(0, 0, 0, 0.20),
            0 16px 38px rgba(0, 0, 0, 0.26);

    --app-card-radius: 1.125rem;
}

:root {
    --app-page-background:
            color-mix(
                    in srgb,
                    var(--surface-ground) 97%,
                    var(--primary-color)
            );
}

:root {
    --inner-card-background:
            color-mix(
                    in srgb,
                    var(--surface-card) 88%,
                    var(--surface-ground)
            );

    --inner-card-border:
            color-mix(
                    in srgb,
                    var(--surface-border) 78%,
                    var(--primary-color)
            );

    --inner-card-highlight:
            color-mix(
                    in srgb,
                    var(--primary-color) 8%,
                    transparent
            );
}

:root {
    --featured-card-background:
            color-mix(
                    in srgb,
                    var(--primary-color) 15%,
                    var(--surface-card)
            );

    --featured-card-border:
            color-mix(
                    in srgb,
                    var(--primary-color) 55%,
                    var(--surface-border)
            );

    --featured-card-shadow:
            0 10px 28px
            color-mix(
                    in srgb,
                    var(--primary-color) 16%,
                    transparent
            );
}

:root {
    --options-card-background:
            color-mix(
                    in srgb,
                    var(--primary-color) 11%,
                    var(--surface-ground)
            );

    --options-card-border:
            color-mix(
                    in srgb,
                    var(--primary-color) 30%,
                    var(--surface-border)
            );

    --options-card-shadow: none;
}

:root {
    --workpot-tabs-background:
            color-mix(
                    in srgb,
                    var(--surface-card) 91%,
                    var(--primary-color)
            );

    --workpot-tabs-border:
            color-mix(
                    in srgb,
                    var(--surface-border) 66%,
                    var(--primary-color)
            );

    --workpot-tabs-shadow:
            0 10px 28px rgba(0, 0, 0, .2);
}

:root {
    --notification-panel-background:
            color-mix(
                    in srgb,
                    var(--surface-card) 91%,
                    var(--primary-color)
            );

    --notification-panel-border:
            color-mix(
                    in srgb,
                    var(--surface-border) 66%,
                    var(--primary-color)
            );

    --notification-panel-shadow:
            0 26px 65px rgba(0, 0, 0, .38);
}

:root {
    --growl-background:
            color-mix(
                    in srgb,
                    var(--surface-card) 91%,
                    var(--primary-color)
            );
    --growl-border:
            color-mix(
                    in srgb,
                    var(--surface-border) 66%,
                    var(--primary-color)
            );
    --growl-shadow:
            0 22px 55px rgba(0, 0, 0, .38);
}