@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root
{
    --kfw-background: var(--rz-base);
    --kfw-text: var(--rz-base);
}

html, body, #app
{
    background: var(--kfw-background);
    color: var(--kfw-text);
    font-family: 'Inter', sans-serif;
    height: 100%;
    margin: 0;
    overflow: hidden;
    overscroll-behavior: none;
    padding: 0;
    touch-action: manipulation;
    width: 100%;
}

body
{
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

::selection
{
    background: color-mix(in srgb, var(--kfw-primary, #808080) 25%, transparent);
}

.kfw-text-gradient label,
.kfw-text-gradient .rz-label
{
    background: linear-gradient(90deg, var(--kfw-gradient-from, #4D7CFE), var(--kfw-gradient-to, #8B5CF6));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.kfw-bg-gradient
{
    background: linear-gradient(90deg, var(--kfw-gradient-from, #4D7CFE), var(--kfw-gradient-to, #8B5CF6)) !important;
}

.kfw-link
{
    text-decoration: none;
}

    .kfw-link .kfw-link-text
    {
        overflow-wrap: anywhere;
    }

    .kfw-link:hover .kfw-link-text
    {
        text-decoration: underline;
    }

.kfw-fab
{
    bottom: 1.5rem;
    position: fixed;
    right: 1.5rem;
    z-index: 1000;
}

.kfw-blend-edges
{
    mask-image: radial-gradient(ellipse 72% 72% at center, black 55%, transparent 98%);
    -webkit-mask-image: radial-gradient(ellipse 72% 72% at center, black 55%, transparent 98%);
}

[data-theme="dark"]
{
    --kfw-background: var(--rz-base-700);
    --kfw-text: var(--rz-base-100);
}

[data-theme="light"]
{
    --kfw-background: var(--rz-base-300);
    --kfw-text: var(--rz-base-800);
}