@font-face {
  font-family: 'Stem';
  src: local('Manrope'), local('Arial'), local('Helvetica'); 
}

:root {
    /* ======================================= */
    /* Colors                                  */
    /* ======================================= */
    --pc-width: 1200px;
    --tablet-width: 768px;
    --phone-width: 428px;

    --primary-default: #FFD400;
    --primary-hover: #FFDF33;
    --secondary-default: #4ECCCD;
    --secondary-hover: #5DF1F3;
    --background-primary: #0A1515;
    --background-secondary: #141D1D;
    --surface-default: #FFFFFF;

    --text-primary: #FFFFFF;
    --text-secondary: #CACACA;
    --text-disabled: #FFFFFF66;
    --text-subtle: #0F1E1E;

    --border-subtle: #FFFFFF29;
    --border-subtle-ondark: #0F1E1E33;

    --border-settings: 1px dashed var(--border-subtle);

    /* ======================================= */
    /* Typography                              */
    /* ======================================= */
    --font-family-base: 'Manrope', sans-serif;

    /* Headings */
    --h1-fs: 3.5rem;
    --h1-fw: 700;
    --h1-lh: 1.1;
    --h1-ls: -0.01em;
    /* 56px */
    --h2-fs: 2.5rem;
    --h2-fw: 700;
    --h2-lh: 1.1;
    --h2-ls: -0.02em;
    /* 40px */
    --h3-fs: 1.5rem;
    --h3-fw: 700;
    --h3-lh: 1.1;
    --h3-ls: -0.02em;
    /* 24px */
    --h4-fs: 1.25rem;
    --h4-fw: 700;
    --h4-lh: 1.3;
    --h4-ls: -0.02em;
    /* 20px */

    /* Text */
    --lead-fs: 1.125rem;
    --lead-fw: 500;
    --lead-lh: 1.2;
    --lead-ls: 0;
    /* 18px */
    --body16-fs: 1rem;
    --body16-fw: 400;
    --body16-lh: 1.4;
    --body16-ls: 0;
    /* 16px */
    --body14-fs: 0.875rem;
    --body14-fw: 400;
    --body14-lh: 1.4;
    --body14-ls: 0;
    /* 14px */
    --body12-fs: 0.75rem;
    --body12-fw: 400;
    --body12-lh: 1.4;
    --body12-ls: 0;
    /* 12px */

    /* UI / Navigation / Buttons */
    --nav-fs: 0.875rem;
    --nav-fw: 500;
    --nav-lh: 1.1;
    --nav-ls: 0;
    /* 14px */
    --btn16-fs: 1rem;
    --btn16-fw: 600;
    --btn16-lh: 1.2;
    --btn16-ls: 0;
    /* 16px */
    --btn14-fs: 0.875rem;
    --btn14-fw: 700;
    --btn14-lh: 1.2;
    --btn14-ls: 0;
    /* 14px */
    --btn12-fs: 0.75rem;
    --btn12-fw: 700;
    --btn12-lh: 1.2;
    --btn12-ls: 0;
    /* 12px */

    /* Data / KPI */
    --kpi-fs: 6.25rem;
    --kpi-fw: 800;
    --kpi-lh: 1.1;
    --kpi-suf-ls: 0;
    /* 64px */
    --kpi-suf-fs: 5rem;
    --kpi-suf-fw: 700;
    --kpi-suf-lh: 1.0;
    --kpi-suf-ls: 0;
    /* 32px */
}

/* ======================================= */
/* Мобильная версия до 768px               */
/* ======================================= */
@media (max-width: 768px) {
    :root {
        /* Headings Mobile */
        --h1-fs: 2.5rem;
        --h1-lh: 1.1;
        --h1-ls: -0.01em;
        /* 40px */
        --h2-fs: 1.75rem;
        --h2-lh: 1.1;
        --h2-ls: -0.02em;
        /* 28px */
        --h3-fs: 1.25rem;
        --h3-lh: 1.1;
        --h3-ls: -0.02em;
        /* 20px */
        --h4-fs: 1rem;
        --h4-lh: 1.1;
        --h4-ls: -0.02em;
        /* 16px */

        /* Text Mobile */
        --body16-fs: 1rem;
        --body16-fw: 500;
        --body16-lh: 1.5;
        --body16-ls: -0.02em;
        /* 16px */
        --body14-fs: 0.875rem;
        --body14-fw: 400;
        --body14-lh: 1.5;
        --body14-ls: -0.02em;
        /* 14px */
    }
}