: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) 96%,
                    var(--primary-color)
            );

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

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

    --app-card-shadow:
            0 1px 2px rgba(6, 43, 58, 0.035),
            0 8px 24px rgba(6, 43, 58, 0.055);

    --app-card-shadow-hover:
            0 3px 8px rgba(6, 43, 58, 0.055),
            0 14px 34px rgba(6, 43, 58, 0.09);

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

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

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

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

    --inner-card-highlight:
            color-mix(
                    in srgb,
                    white 15%,
                    transparent
            );
}

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

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

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

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

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

    --options-card-shadow: none;
}

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

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

    --workpot-tabs-shadow:
            0 8px 24px rgba(6, 43, 58, .06);
}

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

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

    --notification-panel-shadow:
            0 22px 55px rgba(6, 43, 58, .16);
}

:root {
    --growl-background:
            color-mix(
                    in srgb,
                    var(--surface-card) 97%,
                    var(--primary-color)
            );
    --growl-border:
            color-mix(
                    in srgb,
                    var(--surface-border) 74%,
                    var(--primary-color)
            );
    --growl-shadow:
            0 18px 45px rgba(6, 43, 58, .16);
}