/*

HelpSafe Law
VARIABLES
Единая система переменных темы.
Здесь не оформляем конкретные элементы.
Здесь только задаём значения, которые используются
остальными CSS-файлами.
*/

/* ============================================================

ЦВЕТА
============================================================ */

:root {

/* --------------------------------------------------------
   Основные цвета HelpSafe
   -------------------------------------------------------- */

--law-primary:
    #189589;

--law-primary-dark:
    #11766e;

--law-primary-light:
    #e7f5f2;

--law-accent:
    #81c784;

--law-accent-light:
    #edf7ed;


/* --------------------------------------------------------
   Нейтральные цвета
   -------------------------------------------------------- */

--law-text:
    #262424;

--law-text-soft:
    #555d5a;

--law-text-muted:
    #747d79;

--law-white:
    #ffffff;

--law-bg:
    #fffdf5;

--law-bg-soft:
    #f5f8f6;

--law-bg-muted:
    #edf1ef;

--law-border:
    rgba(38, 36, 36, 0.08);

--law-border-strong:
    rgba(38, 36, 36, 0.14);


/* --------------------------------------------------------
   Служебные цвета
   -------------------------------------------------------- */

--law-success:
    #4f9d69;

--law-warning:
    #c98a35;

--law-danger:
    #b85c5c;

--law-info:
    #4e879d;

}

/* ============================================================
2. ТИПОГРАФИКА
============================================================ */

:root {

--law-font-body:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

--law-font-heading:
    "Manrope",
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

--law-font-mono:
    "SFMono-Regular",
    Consolas,
    "Liberation Mono",
    monospace;


/* --------------------------------------------------------
   Базовые параметры
   -------------------------------------------------------- */

--law-font-size:
    16px;

--law-line-height:
    1.65;

--law-heading-line-height:
    1.18;

}

/* ============================================================
3. КОНТЕЙНЕРЫ
============================================================ */

:root {

--law-container-width:
    1180px;

--law-container-wide:
    1320px;

--law-container-narrow:
    860px;

--law-container-padding:
    24px;

}

/* ============================================================
4. HEADER
============================================================ */

:root {

--law-header-height:
    90px;

--law-header-height-mobile:
    68px;

}

/* ============================================================
5. РАДИУСЫ
============================================================ */

:root {

--law-radius-small:
    8px;

--law-radius:
    14px;

--law-radius-large:
    20px;

--law-radius-xl:
    28px;

--law-radius-pill:
    999px;

}

/* ============================================================
6. ТЕНИ
============================================================ */

:root {

--law-shadow-small:
    0 4px 16px rgba(38, 36, 36, 0.05);

--law-shadow:
    0 10px 30px rgba(38, 36, 36, 0.07);

--law-shadow-large:
    0 18px 50px rgba(38, 36, 36, 0.10);

}

/* ============================================================
7. ПЕРЕХОДЫ
============================================================ */

:root {

--law-transition-fast:
    160ms ease;

--law-transition:
    240ms ease;

--law-transition-slow:
    360ms ease;

}

/* ============================================================
8. Z-INDEX
============================================================ */

:root {

--law-z-header:
    100;

--law-z-dropdown:
    150;

--law-z-mobile-menu:
    200;

--law-z-modal:
    300;

}

/* ============================================================
9. BREAKPOINTS
============================================================ */

:root {

/*
 * CSS-переменные нельзя использовать
 * непосредственно внутри media query во всех
 * целевых браузерах одинаково надёжно,
 * поэтому реальные breakpoint'ы остаются
 * прописанными в media query.
 *
 * Эти значения здесь служат как документация
 * дизайн-системы.
 */

--law-breakpoint-tablet:
    1050px;

--law-breakpoint-mobile-menu:
    900px;

--law-breakpoint-mobile:
    800px;

--law-breakpoint-small:
    560px;

--law-breakpoint-tiny:
    380px;

}

/* ============================================================
10. ФОКУС
============================================================ */

:root {

--law-focus:
    0 0 0 3px rgba(24, 149, 137, 0.22);

}

/* ============================================================
11. ПРОЗРАЧНОСТЬ
============================================================ */

:root {

--law-overlay:
    rgba(20, 27, 25, 0.58);

}