/* ==========================================================================
   TURBO ZNO — design tokens
   --------------------------------------------------------------------------
   Names mirror the SCSS variables of the original site
   (libs/shared/assets/src/scss/abstract/variables/*.scss): `$name` → `--name`.
   ========================================================================== */

:root {
    /* ---------- Colors: neutrals ---------- */
    --color-white: #ffffff;
    --color-black: #1f1f1f;
    --color-gray: #454545;
    --color-gray-secondary: #697278;
    --color-gray-disabled: #8f8f8f;
    --color-gray-stroke: #ebebeb;
    --color-gray-light: #eff2f4;
    --color-gray-lighter: #f7f9fb;
    --color-gray-shadow: #eaeef1;
    --color-gray-shadow-2: #93a5b1;
    --color-transparent: transparent;

    /* ---------- Colors: brand ---------- */
    --color-primary-300: #78c6ff;
    --color-primary: #48b2ff;
    --color-primary-600: #016fce;
    --color-primary-800: #024b89;
    --color-primary-950: #06264a;
    --color-blue-light: #eaf6ff;
    --color-additional-blue-dark: #090d72;
    --color-additional-purple: #4f5dff;
    --color-additional-green: #2dd6b8;

    /* ---------- Colors: status ---------- */
    --color-green: #29be8c;
    --color-orange: #ea910b;
    --color-yellow: #ffd599;
    --color-red: #ed5252;
    --color-success: var(--color-green);
    --color-warning: var(--color-orange);
    --color-error: var(--color-red);

    /* ---------- Colors: subjects (main + 10% tint) ---------- */
    --color-education: #48b2ff;
    --color-education-10: #e4f3ff;
    --color-history: #2b80ff;
    --color-history-10: #dfecff;
    --color-ukrainian: #ff9900;
    --color-ukrainian-10: #fff0d9;
    --color-literature: #f96513;
    --color-literature-10: #fee8dc;
    --color-maths: #ea9197;
    --color-maths-10: #fcefef;
    --color-english: #f02d32;
    --color-english-10: #fde0e0;
    --color-biology: #36c8cb;
    --color-biology-10: #e1f7f7;
    --color-geography: #5acc37;
    --color-geography-10: #e6f7e1;
    --color-chemistry: #f35a55;
    --color-chemistry-10: #feeeee;
    --color-physics: #ca34cc;
    --color-physics-10: #faeafa;
    --color-students: #db272c;
    --color-students-10: #fbe9e9;

    /* ---------- Typography ---------- */
    --font-family: "Montserrat", "Montserrat Fallback", sans-serif;

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semi-bold: 600;
    --fw-bold: 700;

    /* Headings */
    --fs-header-xxl: 52px;
    --fs-header-xl: 40px;
    --fs-header-lg: 36px;
    --fs-header-md: 32px;
    --fs-header-sm: 24px;
    --fs-header-xs: 18px;
    --fs-header-xxs: 14px;

    /* Text */
    --fs-xxl: 36px;
    --fs-xl: 32px;
    --fs-lg: 24px;
    --fs-md: 18px;
    --fs-base: 16px;
    --fs-sm: 14px;
    --fs-xs: 12px;
    --fs-xxs: 10px;

    --lh-large: 1.4;
    --lh-base: 1.2;
    --lh-normal: normal;

    /* ---------- Spacing ---------- */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 48px;
    --spacing-xxl: 120px;

    /* Side offsets from the viewport edge (container padding) */
    --spacing-container-sm: 16px;
    --spacing-container-md: 32px;
    --spacing-container-lg: 64px;

    /* ---------- Radius ---------- */
    --border-radius-xs: 4px;
    --border-radius-sm: 8px;
    --border-radius-md: 16px;
    --border-radius-lg: 24px;
    --border-radius-xl: 40px;

    /* ---------- Layers ---------- */
    --ui-index-1: 10; /* elements in the general flow */
    --ui-index-2: 20; /* elements in the general flow */
    --ui-index-3: 30; /* masks */
    --ui-index-4: 40; /* header, cookies panel */
    --ui-index-5: 50; /* modals, mobile menu */
    --ui-index-6: 60; /* elements that overlap everything */

    /* ---------- Layout ---------- */
    --container: 1508px;
    --container-min: 360px;

    /* ---------- Breakpoints ----------
       Reference values (also read by JS). CSS variables can't be used inside
       @media, so media queries repeat these numbers literally:
         min-width: 576px (sm) · 768px (md) · 992px (lg) · 1200px (xl) · 1400px (xxl) · 1920px (xxxl)
       "Below X" queries use X − 0.02px, e.g. (max-width: 991.98px). */
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-xxl: 1400px;
    --breakpoint-xxxl: 1920px;

    /* ---------- Effects ---------- */
    --transition-base: 0.2s ease-in-out;
    --shadow-soft: 0 4px 20px rgb(234 238 241 / 70%); /* --color-gray-shadow @ 70% */
    --shadow-floating: -4px 8px 30px 0 rgb(147 165 177 / 40%); /* --color-gray-shadow-2 @ 40% */
}