/**
 * Do not edit directly, this file was auto-generated.
 */
/* stylelint-disable */

@theme {
    --*: initial;

    --color-background-page: var(--jkl-color-background-page);
    --color-background-page-variant: var(--jkl-color-background-page-variant);
    --color-background-container: var(--jkl-color-background-container);
    --color-background-container-low: var(--jkl-color-background-container-low);
    --color-background-container-high: var(--jkl-color-background-container-high);
    --color-background-container-inverted: var(--jkl-color-background-container-inverted);
    --color-background-container-subdued: var(--jkl-color-background-container-subdued);
    --color-background-input-base: var(--jkl-color-background-input-base);
    --color-background-input-focus: var(--jkl-color-background-input-focus);
    --color-background-action: var(--jkl-color-background-action);
    --color-background-interactive: var(--jkl-color-background-interactive);
    --color-background-interactive-hover: var(--jkl-color-background-interactive-hover);
    --color-background-interactive-selected: var(--jkl-color-background-interactive-selected);
    --color-background-alert-neutral: var(--jkl-color-background-alert-neutral);
    --color-background-alert-info: var(--jkl-color-background-alert-info);
    --color-background-alert-success: var(--jkl-color-background-alert-success);
    --color-background-alert-warning: var(--jkl-color-background-alert-warning);
    --color-background-alert-error: var(--jkl-color-background-alert-error);
    --color-text-default: var(--jkl-color-text-default);
    --color-text-subdued: var(--jkl-color-text-subdued);
    --color-text-inverted: var(--jkl-color-text-inverted);
    --color-text-on-action: var(--jkl-color-text-on-action);
    --color-text-interactive: var(--jkl-color-text-interactive);
    --color-text-interactive-hover: var(--jkl-color-text-interactive-hover);
    --color-text-on-alert: var(--jkl-color-text-on-alert);
    --color-text-on-alert-subdued: var(--jkl-color-text-on-alert-subdued);
    --color-border-action: var(--jkl-color-border-action);
    --color-border-input: var(--jkl-color-border-input);
    --color-border-input-focus: var(--jkl-color-border-input-focus);
    --color-border-separator: var(--jkl-color-border-separator);
    --color-border-separator-strong: var(--jkl-color-border-separator-strong);
    --color-border-separator-hover: var(--jkl-color-border-separator-hover);
    --color-border-subdued: var(--jkl-color-border-subdued);

    --spacing-0: 0rem;
    --spacing-2: 0.125rem;
    --spacing-4: 0.25rem;
    --spacing-8: 0.5rem;
    --spacing-12: 0.75rem;
    --spacing-16: 1rem;
    --spacing-24: 1.5rem;
    --spacing-32: 2rem;
    --spacing-40: 2.5rem;
    --spacing-64: 4rem;
    --spacing-104: 6.5rem;
    --spacing-168: 10.5rem;

    --font-weight-normal: 400;
    --font-weight-bold: 700;

    --breakpoint-small: 0;
    --breakpoint-medium: 680px;
    --breakpoint-large: 1200px;
    --breakpoint-xl: 1600px;

    --radius-none: 0;
    --radius-xs: 0.25rem;
    --radius-s: 0.5rem;
    --radius-m: 0.75rem;
    --radius-l: 1rem;
    --radius-full: 9999px;
    --border-width-1: 0.0625rem;
    --border-width-2: 0.125rem;
    --border-width-3: 0.1875rem;
}

@utility title {
    font-size: var(--jkl-font-size-8);
    line-height: var(--jkl-line-height-tight);
    font-weight: 400;

    @media (min-width: 680px) {
        font-size: var(--jkl-font-size-8);
        line-height: var(--jkl-line-height-tight);
        font-weight: 400;
    }
}

@utility title-small {
    font-size: var(--jkl-font-size-7);
    line-height: var(--jkl-line-height-tight);
    font-weight: 400;

    @media (min-width: 680px) {
        font-size: var(--jkl-font-size-7);
        line-height: var(--jkl-line-height-tight);
        font-weight: 400;
    }
}

@utility heading-1 {
    font-size: var(--jkl-font-size-8);
    line-height: var(--jkl-line-height-tight);
    font-weight: 400;

    @media (min-width: 680px) {
        font-size: var(--jkl-font-size-8);
        line-height: var(--jkl-line-height-tight);
        font-weight: 400;
    }
}

@utility heading-2 {
    font-size: var(--jkl-font-size-7);
    line-height: var(--jkl-line-height-tight);
    font-weight: 400;

    @media (min-width: 680px) {
        font-size: var(--jkl-font-size-7);
        line-height: var(--jkl-line-height-tight);
        font-weight: 400;
    }
}

@utility heading-3 {
    font-size: var(--jkl-font-size-6);
    line-height: var(--jkl-line-height-tight);
    font-weight: 700;

    @media (min-width: 680px) {
        font-size: var(--jkl-font-size-6);
        line-height: var(--jkl-line-height-tight);
        font-weight: 700;
    }
}

@utility heading-4 {
    font-size: var(--jkl-font-size-5);
    line-height: var(--jkl-line-height-tight);
    font-weight: 700;

    @media (min-width: 680px) {
        font-size: var(--jkl-font-size-5);
        line-height: var(--jkl-line-height-tight);
        font-weight: 700;
    }
}

@utility heading-5 {
    font-size: var(--jkl-font-size-4);
    line-height: var(--jkl-line-height-tight);
    font-weight: 700;

    @media (min-width: 680px) {
        font-size: var(--jkl-font-size-4);
        line-height: var(--jkl-line-height-tight);
        font-weight: 700;
    }
}

@utility paragraph-large {
    font-size: var(--jkl-font-size-5);
    line-height: var(--jkl-line-height-relaxed);
    font-weight: 400;

    @media (min-width: 680px) {
        font-size: var(--jkl-font-size-5);
        line-height: var(--jkl-line-height-relaxed);
        font-weight: 400;
    }
}

@utility paragraph-medium {
    font-size: var(--jkl-font-size-3);
    line-height: var(--jkl-line-height-relaxed);
    font-weight: 400;

    @media (min-width: 680px) {
        font-size: var(--jkl-font-size-3);
        line-height: var(--jkl-line-height-relaxed);
        font-weight: 400;
    }
}

@utility paragraph-small {
    font-size: var(--jkl-font-size-2);
    line-height: var(--jkl-line-height-relaxed);
    font-weight: 400;

    @media (min-width: 680px) {
        font-size: var(--jkl-font-size-2);
        line-height: var(--jkl-line-height-relaxed);
        font-weight: 400;
    }
}

@utility text-large {
    font-size: var(--jkl-font-size-5);
    line-height: var(--jkl-line-height-tight);
    font-weight: 400;

    @media (min-width: 680px) {
        font-size: var(--jkl-font-size-5);
        line-height: var(--jkl-line-height-tight);
        font-weight: 400;
    }
}

@utility text-medium {
    font-size: var(--jkl-font-size-3);
    line-height: var(--jkl-line-height-tight);
    font-weight: 400;

    @media (min-width: 680px) {
        font-size: var(--jkl-font-size-3);
        line-height: var(--jkl-line-height-tight);
        font-weight: 400;
    }
}

@utility text-small {
    font-size: var(--jkl-font-size-2);
    line-height: var(--jkl-line-height-tight);
    font-weight: 400;

    @media (min-width: 680px) {
        font-size: var(--jkl-font-size-2);
        line-height: var(--jkl-line-height-tight);
        font-weight: 400;
    }
}

@utility text-micro {
    font-size: var(--jkl-font-size-1);
    line-height: var(--jkl-line-height-tight);
    font-weight: 400;

    @media (min-width: 680px) {
        font-size: var(--jkl-font-size-1);
        line-height: var(--jkl-line-height-tight);
        font-weight: 400;
    }
}

@utility body {
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 400;

    @media (min-width: 680px) {
        font-size: 1.25rem;
        line-height: 2rem;
        font-weight: 400;
    }
}

@utility small {
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 400;

    @media (min-width: 680px) {
        font-size: 1rem;
        line-height: 1.5rem;
        font-weight: 400;
    }
}