/* ============================================================
   PinVideo Design System — Tokens
   Colors, typography, spacing, radii, shadows.
   Source of truth: Figma "PinVideo Дизайн-система 2025"
   ============================================================ */

/* ---------- Fonts (Google Fonts) ----------
   Mulish is the primary brand face (UI + display).
   DM Sans is used for numeric labels on the spacing/scale frames.
   Inter shows up in display numerals.
   Poppins is a tiny accent (size 11.7px). All four are open-source
   and load fine from Google Fonts at the weights below.
*/
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../fonts/dm-sans-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../fonts/dm-sans-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url("../fonts/dm-sans-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url("../fonts/dm-sans-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url("../fonts/dm-sans-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url("../fonts/dm-sans-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../fonts/inter-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../fonts/inter-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../fonts/inter-greek-ext.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../fonts/inter-greek.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../fonts/inter-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../fonts/inter-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../fonts/inter-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url("../fonts/inter-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url("../fonts/inter-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url("../fonts/inter-greek-ext.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url("../fonts/inter-greek.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url("../fonts/inter-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url("../fonts/inter-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url("../fonts/inter-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: block;
  src: url("../fonts/inter-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: block;
  src: url("../fonts/inter-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: block;
  src: url("../fonts/inter-greek-ext.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: block;
  src: url("../fonts/inter-greek.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: block;
  src: url("../fonts/inter-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: block;
  src: url("../fonts/inter-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: block;
  src: url("../fonts/inter-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 300;
  font-display: block;
  src: url("../fonts/mulish-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 300;
  font-display: block;
  src: url("../fonts/mulish-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 300;
  font-display: block;
  src: url("../fonts/mulish-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 300;
  font-display: block;
  src: url("../fonts/mulish-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 300;
  font-display: block;
  src: url("../fonts/mulish-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../fonts/mulish-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../fonts/mulish-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../fonts/mulish-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../fonts/mulish-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../fonts/mulish-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url("../fonts/mulish-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url("../fonts/mulish-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url("../fonts/mulish-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url("../fonts/mulish-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url("../fonts/mulish-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 600;
  font-display: block;
  src: url("../fonts/mulish-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 600;
  font-display: block;
  src: url("../fonts/mulish-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 600;
  font-display: block;
  src: url("../fonts/mulish-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 600;
  font-display: block;
  src: url("../fonts/mulish-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 600;
  font-display: block;
  src: url("../fonts/mulish-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url("../fonts/mulish-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url("../fonts/mulish-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url("../fonts/mulish-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url("../fonts/mulish-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url("../fonts/mulish-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 800;
  font-display: block;
  src: url("../fonts/mulish-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 800;
  font-display: block;
  src: url("../fonts/mulish-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 800;
  font-display: block;
  src: url("../fonts/mulish-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 800;
  font-display: block;
  src: url("../fonts/mulish-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 800;
  font-display: block;
  src: url("../fonts/mulish-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../fonts/poppins-devanagari.woff2") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../fonts/poppins-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../fonts/poppins-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url("../fonts/roboto-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url("../fonts/roboto-cyrillic.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url("../fonts/roboto-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root {
  /* =====================================================
     COLOR — RAW PALETTE
     Every named color from /page/frame4/Цвета.
     ===================================================== */

  /* White (alpha ramp, for use over dark/coloured surfaces) */
  --pv-white-main:  #FFFFFF;
  --pv-white-400:   rgba(255, 255, 255, 0.80);
  --pv-white-300:   rgba(255, 255, 255, 0.60);
  --pv-white-200:   rgba(255, 255, 255, 0.40);
  --pv-white-150:   rgba(255, 255, 255, 0.16);
  --pv-white-100:   rgba(255, 255, 255, 0.12);
  --pv-white-50:    rgba(255, 255, 255, 0.08);

  /* Dark */
  --pv-dark-main:   #1E1E1E;
  --pv-dark-400:    #292929;
  --pv-dark-300:    rgba(30, 30, 30, 0.60);

  /* Gray */
  --pv-gray-600:    #4E4E61;
  --pv-gray-500:    #66667D;
  --pv-gray-main:   #7F7F9D;   /* secondary text */
  --pv-gray-400:    #ACACB6;
  --pv-gray-350:    #AAB4C9;
  --pv-gray-300:    #C7D0D8;
  --pv-gray-100:    #F5F6F8;

  /* Gray-Blue (the signature lavender-gray ramp) */
  --pv-gray-blue-main: #A1A4C4;
  --pv-gray-blue-400:  #BDBCDB;
  --pv-gray-blue-350:  #BEC4E5;
  --pv-gray-blue-300:  #C8D0EB;
  --pv-gray-blue-200:  #D7DBEF;
  --pv-gray-blue-150:  #E3E7F5;
  --pv-gray-blue-100:  #EAEDF8;
  --pv-gray-blue-50:   #F1F3FB;   /* THE brand neutral background */

  /* Blue (primary action) */
  --pv-blue-500:    #004FCF;
  --pv-blue-main:   #7381F4;
  --pv-blue-300:    #C4DCFF;
  --pv-blue-200:    #EFF1FF;
  /* Gradient stops used on Primary buttons + active nav */
  --pv-blue-grad-from: #7E92F8;
  --pv-blue-grad-to:   #6972F0;

  /* Red (critical / danger / live-record) */
  --pv-red-700:     #A82B25;
  --pv-red-600:     #C2322B;
  --pv-red-500:     #D93A32;
  --pv-red-main:    #F04138;
  --pv-red-400:     #FBF5F5;

  /* Green (success / playback) */
  --pv-green-700:   #36944C;
  --pv-green-600:   #3FA857;
  --pv-green-500:   #48BC62;
  --pv-green-main:  #51D16D;
  --pv-green-400:   #C9F3CE;

  /* Yellow (warning) */
  --pv-yellow-500:  #D47F00;
  --pv-yellow-main: #FFF2B8;

  /* =====================================================
     COLOR — SEMANTIC TOKENS
     ===================================================== */

  /* Surfaces */
  --pv-bg-page:        var(--pv-gray-blue-50);  /* product canvas */
  --pv-bg-surface:     #FFFFFF;                 /* cards, sidebars */
  --pv-bg-secondary:   var(--pv-gray-blue-50);  /* input fills, chips on white */
  --pv-bg-secondary-on-color: var(--pv-white-150); /* chips on coloured backgrounds */
  --pv-bg-overlay:     rgba(30, 30, 30, 0.60);  /* overlays on video tiles */
  --pv-bg-video:       #1B1A2A;                 /* the player chrome */
  --pv-bg-video-2:     #212030;                 /* the controls bar */

  /* Text */
  --pv-fg-primary:     var(--pv-dark-main);
  --pv-fg-secondary:   var(--pv-gray-main);
  --pv-fg-disabled:    var(--pv-gray-400);
  --pv-fg-on-color:    #FFFFFF;
  --pv-fg-link:        var(--pv-blue-main);

  /* Borders */
  --pv-border-soft:    var(--pv-gray-blue-150);
  --pv-border-default: var(--pv-gray-blue-200);
  --pv-border-strong:  var(--pv-gray-blue-400);
  --pv-border-focus:   var(--pv-blue-main);

  /* Status */
  --pv-status-success: var(--pv-green-main);
  --pv-status-warning: var(--pv-yellow-500);
  --pv-status-critical:var(--pv-red-main);
  --pv-status-info:    var(--pv-blue-main);
  --pv-status-recording: #E31D1C;  /* the cursor dot on the timeline */

  /* Brand action gradient (Primary button / active nav icon) */
  --pv-gradient-primary: linear-gradient(180deg, #7E92F8 0%, #6972F0 100%);

  /* =====================================================
     TYPE — FAMILIES
     ===================================================== */
  --pv-font-sans:    "Mulish", system-ui, -apple-system, sans-serif;
  --pv-font-display: "Mulish", system-ui, -apple-system, sans-serif;
  --pv-font-numeric: "DM Sans", "Mulish", system-ui, sans-serif;
  --pv-font-mono:    ui-monospace, "JetBrains Mono", Menlo, monospace;

  /* =====================================================
     TYPE — ROLE TOKENS (size / weight / line-height)
     Mapped directly from /page/frame3/Текстовые стили.
     ===================================================== */

  /* Display (cover hero, big numerals) */
  --pv-text-display-1:    700 60px/100.674px var(--pv-font-display);  /* "Дизайн-система" */
  --pv-text-display-2:    700 40px/56px var(--pv-font-display);       /* section title */

  /* Headings */
  --pv-text-h1:           700 24px/32px var(--pv-font-sans);
  --pv-text-h2:           700 20px/26px var(--pv-font-sans);
  --pv-text-h3:           800 18px/20px var(--pv-font-sans);
  --pv-text-h4:           700 16px/18px var(--pv-font-sans);

  /* Body */
  --pv-text-body-1:       600 16px/18px var(--pv-font-sans);
  --pv-text-body-2:       600 14px/18px var(--pv-font-sans);
  --pv-text-body-2-bold:  700 14px/18px var(--pv-font-sans);
  --pv-text-body-3-light: 300 12px/16px var(--pv-font-sans);
  --pv-text-body-3:       600 12px/16px var(--pv-font-sans);
  --pv-text-body-3-bold:  700 12px/16px var(--pv-font-sans);

  /* Buttons */
  --pv-text-button-m:     700 16px/1.6 var(--pv-font-sans);
  --pv-text-button-s:     700 14px/1.86 var(--pv-font-sans);
  --pv-text-button-xs:    600 12px/1.5 var(--pv-font-sans);

  /* =====================================================
     SPACING — multiples of 16, named x0.5 … x16
     From /page/frame/Отступы.
     ===================================================== */
  --pv-space-0:    0px;
  --pv-space-half: 2px;   /* x0.5 */
  --pv-space-1:    4px;
  --pv-space-2:    8px;
  --pv-space-2-5:  10px;
  --pv-space-3:    12px;
  --pv-space-4:    16px;
  --pv-space-5:    20px;
  --pv-space-6:    24px;
  --pv-space-7:    28px;
  --pv-space-8:    32px;
  --pv-space-10:   40px;
  --pv-space-12:   48px;
  --pv-space-16:   64px;

  /* =====================================================
     RADII
     ===================================================== */
  --pv-radius-xs:   4px;   /* swatch */
  --pv-radius-sm:   8px;   /* inputs, small chips */
  --pv-radius-md:   12px;  /* secondary chips, info tiles, pagination footer */
  --pv-radius-lg:   16px;  /* modal inner, dark overlays */
  --pv-radius-xl:   24px;  /* big surfaces, primary buttons, cards */
  --pv-radius-pill: 999px; /* sidebar icon, chip, FAB */

  /* =====================================================
     SHADOWS / ELEVATION
     ===================================================== */
  --pv-shadow-sidebar:  0px 10px 60px 0px rgba(226, 236, 249, 0.50);
  --pv-shadow-card:     0px 4px 24px 0px rgba(127, 127, 157, 0.08);
  --pv-shadow-popover:  0px 12px 40px 0px rgba(30, 30, 30, 0.12);
  --pv-shadow-video:    0px 0px 25px 0px rgba(0, 0, 0, 0.25);

  /* =====================================================
     MOTION
     PinVideo uses subtle, professional easing — no bouncy.
     ===================================================== */
  --pv-ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --pv-ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
  --pv-dur-fast:     120ms;
  --pv-dur-base:     200ms;
  --pv-dur-slow:     320ms;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Use these on bare HTML when you don't want a utility framework.
   ============================================================ */

html, body {
  background: var(--pv-bg-page);
  color: var(--pv-fg-primary);
  font: var(--pv-text-body-1);
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
}

h1, .pv-h1 { font: var(--pv-text-h1); letter-spacing: 0.005em; color: var(--pv-fg-primary); margin: 0; }
h2, .pv-h2 { font: var(--pv-text-h2); letter-spacing: 0.005em; color: var(--pv-fg-primary); margin: 0; }
h3, .pv-h3 { font: var(--pv-text-h3); color: var(--pv-fg-primary); margin: 0; }
h4, .pv-h4 { font: var(--pv-text-h4); color: var(--pv-fg-primary); margin: 0; }

p   { font: var(--pv-text-body-2); color: var(--pv-fg-primary); margin: 0; }
small, .pv-caption { font: var(--pv-text-body-3); color: var(--pv-fg-secondary); }

.pv-display-1 { font: var(--pv-text-display-1); letter-spacing: 0.003em; }
.pv-display-2 { font: var(--pv-text-display-2); letter-spacing: 0.0025em; }

a { color: var(--pv-fg-link); text-decoration: none; }
a:hover { color: var(--pv-blue-500); }

/* Utility helpers used by preview cards */
.pv-mono-num { font-family: var(--pv-font-numeric); font-weight: 500; letter-spacing: -0.014em; }