:root {
    --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;

    --lh-tight: 1.1;
    --lh-snug: 1.2;
    --lh-normal: 1.4;
    --lh-relaxed: 1.6;

    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-heavy: 800;

    --fs-3xs: 0.35rem;
    --fs-2xs: 0.45rem;
    --fs-xs: 0.5rem;
    --fs-sm: 0.5125rem;
    --fs-md: 0.675rem;
    --fs-lg: 0.7375rem;
    --fs-xl: 0.80rem;
    --fs-2xl: 0.925rem;
    --fs-3xl: 1.105rem;
    --fs-4xl: 1.280rem;
    --fs-5xl: 1.460rem;
    --fs-6xl: 1.860rem;
    --fs-7xl: 2.90rem;

    --text-micro: var(--fs-3xs);
    --text-meta: var(--fs-2xs);
    --text-label: var(--fs-xs);
    --text-body-sm: var(--fs-sm);
    --text-body: var(--fs-md);
    --text-body-lg: var(--fs-lg);
    --text-button: var(--fs-md);
    --text-button-lg: var(--fs-xl);
    --text-title-sm: var(--fs-2xl);
    --text-title-md: var(--fs-3xl);
    --text-title-lg: var(--fs-4xl);
    --text-title-xl: var(--fs-5xl);
    --text-display: var(--fs-6xl);
    --text-numeric-xl: var(--fs-7xl);

    --visual-glyph-sm: var(--fs-xl);
    --visual-glyph-md: var(--fs-2xl);
    --visual-glyph-lg: var(--fs-4xl);
    --visual-glyph-xl: var(--fs-5xl);
    --visual-emblem-sm: var(--fs-2xl);
    --visual-emblem-md: 1.625rem;
    --visual-emblem-lg: 1.875rem;
    --visual-close-md: var(--fs-4xl);
}

@media (max-width: 240px) {
    :root {
        /* --fs-3xs: 0.5rem;
        --fs-2xs: 0.5625rem;
        --fs-xs: 0.625rem;
        --fs-sm: 0.6875rem;
        --fs-md: 0.75rem;
        --fs-lg: 0.8125rem;
        --fs-xl: 0.875rem;
        --fs-2xl: 1rem;
        --fs-3xl: 1.125rem;
        --fs-4xl: 1.25rem;
        --fs-5xl: 1.375rem;
        --fs-6xl: 1.625rem;
        --fs-7xl: 2.25rem;*/
    }
}

@media (min-width: 241px) and (max-width: 360px) {
    :root {
        /*  --fs-3xs: 0.5625rem;
        --fs-2xs: 0.625rem;
        --fs-xs: 0.6875rem;
        --fs-sm: 0.75rem;
        --fs-md: 0.8125rem;
        --fs-lg: 0.875rem;
        --fs-xl: 0.9375rem;
        --fs-2xl: 1.0625rem;
        --fs-3xl: 1.1875rem;
        --fs-4xl: 1.375rem;
        --fs-5xl: 1.55rem;
        --fs-6xl: 1.85rem;
        --fs-7xl: 2.5rem;/*
    }
}

@media (min-width: 361px) and (max-width: 480px) {
    :root {
      /*  --fs-3xs: 0.625rem;
        --fs-2xs: 0.6875rem;
        --fs-xs: 0.75rem;
        --fs-sm: 0.8125rem;
        --fs-md: 0.875rem;
        --fs-lg: 0.9375rem;
        --fs-xl: 1rem;
        --fs-2xl: 1.125rem;
        --fs-3xl: 1.25rem;
        --fs-4xl: 1.4375rem;
        --fs-5xl: 1.65rem;
        --fs-6xl: 1.95rem;
        --fs-7xl: 2.75rem;*/
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    :root {
        /* --fs-2xs: 0.6875rem;
        --fs-xs: 0.75rem;
        --fs-sm: 0.8125rem;
        --fs-md: 0.875rem;
        --fs-lg: 0.9375rem;
        --fs-xl: 1rem;
        --fs-2xl: 1.125rem;
        --fs-3xl: 1.25rem;
        --fs-4xl: 1.5rem;
        --fs-5xl: 1.7rem;
        --fs-6xl: 1.95rem;
        --fs-7xl: 2.875rem;*/
    }
}

body {
    font-family: var(--font-family-base);
    font-size: var(--text-body);
    line-height: var(--lh-normal);
}

button,
input,
select,
textarea {
    font: inherit;
}