﻿:root {
    /* Primary */
    --color-primary-0-rgb: 255 255 255;
    --color-primary-50-rgb: 232 239 255;
    --color-primary-100-rgb: 202 219 255;
    --color-primary-200-rgb: 163 194 255;
    --color-primary-300-rgb: 115 163 255;
    --color-primary-400-rgb: 70 132 255;
    --color-primary-500-rgb: 1 71 255; /* basic */
    --color-primary-600-rgb: 0 63 230;
    --color-primary-700-rgb: 0 52 190;
    --color-primary-800-rgb: 0 41 145;
    --color-primary-900-rgb: 0 30 100;
    /* Secondary */
    --color-secondary-0-rgb: 255 255 255;
    --color-secondary-50-rgb: 250 250 251;
    --color-secondary-100-rgb: 245 245 246;
    --color-secondary-200-rgb: 236 236 238;
    --color-secondary-300-rgb: 230 230 232;
    --color-secondary-400-rgb: 225 225 227;
    --color-secondary-500-rgb: 227 227 229; /* basic */
    --color-secondary-550-rgb: 213 213 216;
    --color-secondary-600-rgb: 199 199 202;
    --color-secondary-700-rgb: 162 162 166;
    --color-secondary-800-rgb: 119 119 124;
    --color-secondary-900-rgb: 77 77 82;
    /* Neutral (Fonts) */
    --color-neutral-0-rgb: 255 255 255;
    --color-neutral-50-rgb: 245 247 247;
    --color-neutral-100-rgb: 226 230 231;
    --color-neutral-200-rgb: 196 202 203;
    --color-neutral-300-rgb: 161 168 170;
    --color-neutral-400-rgb: 120 127 129;
    --color-neutral-500-rgb: 82 90 92;
    --color-neutral-600-rgb: 55 62 63;
    --color-neutral-700-rgb: 33 38 39;
    --color-neutral-800-rgb: 18 21 21;
    --color-neutral-900-rgb: 0 16 17; /* basic */
    /* Warning */
    --color-yellow-0-rgb: 255 255 255;
    --color-yellow-50-rgb: 255 250 235;
    --color-yellow-100-rgb: 254 243 199;
    --color-yellow-200-rgb: 253 230 138;
    --color-yellow-300-rgb: 252 211 77;
    --color-yellow-400-rgb: 251 191 36;
    --color-yellow-500-rgb: 246 195 67; /* basic */
    --color-yellow-600-rgb: 234 179 8;
    --color-yellow-700-rgb: 202 138 4;
    --color-yellow-800-rgb: 161 98 7;
    --color-yellow-900-rgb: 133 77 14;
    /* Success */
    --color-green-0-rgb: 255 255 255;
    --color-green-50-rgb: 236 253 245;
    --color-green-100-rgb: 209 250 229;
    --color-green-200-rgb: 167 243 208;
    --color-green-300-rgb: 110 231 183;
    --color-green-400-rgb: 52 211 153;
    --color-green-500-rgb: 16 185 129; /* basic */
    --color-green-600-rgb: 5 150 105;
    --color-green-700-rgb: 4 120 87;
    --color-green-800-rgb: 6 95 70;
    --color-green-900-rgb: 6 78 59;
    /* Error */
    --color-red-0-rgb: 255 255 255;
    --color-red-50-rgb: 254 242 242;
    --color-red-100-rgb: 254 226 226;
    --color-red-200-rgb: 254 202 202;
    --color-red-300-rgb: 252 165 165;
    --color-red-400-rgb: 248 113 113;
    --color-red-500-rgb: 239 68 68; /* basic */
    --color-red-600-rgb: 220 38 38;
    --color-red-700-rgb: 185 28 28;
    --color-red-800-rgb: 153 27 27;
    --color-red-900-rgb: 127 29 29;
    /* Mask - Shade */
    --color-mask-shade-0: rgba(0 16 17 / 0.00);
    --color-mask-shade-5: rgba(0 16 17 / 0.05);
    --color-mask-shade-10: rgba(0 16 17 / 0.10);
    --color-mask-shade-15: rgba(0 16 17 / 0.15);
    --color-mask-shade-20: rgba(0 16 17 / 0.20);
    --color-mask-shade-30: rgba(0 16 17 / 0.30);
    --color-mask-shade-40: rgba(0 16 17 / 0.40);
    --color-mask-shade-50: rgba(0 16 17 / 0.50);
    --color-mask-shade-60: rgba(0 16 17 / 0.60);
    --color-mask-shade-70: rgba(0 16 17 / 0.70);
    --color-mask-shade-80: rgba(0 16 17 / 0.80);
    --color-mask-shade-90: rgba(0 16 17 / 0.90);
    --color-mask-shade-100: rgba(0 16 17 / 1.00);
    /* Mask - Tint */
    --color-mask-tint-0: rgba(255 255 255 / 0.00);
    --color-mask-tint-5: rgba(255 255 255 / 0.05);
    --color-mask-tint-10: rgba(255 255 255 / 0.10);
    --color-mask-tint-20: rgba(255 255 255 / 0.20);
    --color-mask-tint-30: rgba(255 255 255 / 0.30);
    --color-mask-tint-40: rgba(255 255 255 / 0.40);
    --color-mask-tint-50: rgba(255 255 255 / 0.50);
    --color-mask-tint-60: rgba(255 255 255 / 0.60);
    --color-mask-tint-70: rgba(255 255 255 / 0.70);
    --color-mask-tint-80: rgba(255 255 255 / 0.80);
    --color-mask-tint-90: rgba(255 255 255 / 0.90);
    --color-mask-tint-100: rgba(255 255 255 / 1.00);
    /* SIZES */
    /* Font */
    --size-font-h1: 32px;
    --size-font-h2: 24px;
    --size-font-h3: 20px;
    --size-font-h4: 16px;
    --size-font-p: 14px;
    --size-font-small: 12px;
    --size-font-caption: 10px;
    /* Line Height */
    --size-line-height-h1: 44px;
    --size-line-height-h2: 34px;
    --size-line-height-h3: 28px;
    --size-line-height-h4: 24px;
    --size-line-height-p: 20px;
    --size-line-height-small: 16px;
    --size-line-height-caption: 14px;
    /* Radius */
    --size-radius-xl: 16px;
    --size-radius-l: 12px;
    --size-radius-base: 8px;
    --size-radius-s: 6px;
    --size-radius-xs: 4px;
    --size-radius-xxs: 3px;
    /* Spacing */
    --size-spacing-0: 0px;
    --size-spacing-2: 2px;
    --size-spacing-4: 4px;
    --size-spacing-5: 5px;
    --size-spacing-6: 6px;
    --size-spacing-8: 8px;
    --size-spacing-12: 12px;
    --size-spacing-16: 16px;
    --size-spacing-24: 24px;
    --size-spacing-32: 32px;
    --size-spacing-40: 40px;
    --size-spacing-48: 48px;
    /* FONT */
    /*--font-family-basic: 'DM Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;*/
    --font-family-basic: 'Onest', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-family-regex: 'Geist Mono', sans-serif;
    /* TRANSITION */
    --transition-medium: 0.2s ease;
    --transition-small: 0.1s ease;
}

* {
    margin: 0;
    padding: 0;
    line-height: 1;
    border: 0;
    font-family: var(--font-family-basic);
    --text-color-basic: rgb(var(--color-neutral-900-rgb));
    color: var(--text-color-basic);
}

h1 {
    font-size: var(--size-font-h1);
    line-height: var(--size-line-height-h1);
    font-weight: 600;
}

h2 {
    font-size: var(--size-font-h2);
    line-height: var(--size-line-height-h2);
    font-weight: 600;
}

h3 {
    font-size: var(--size-font-h3);
    line-height: var(--size-line-height-h3);
    font-weight: 600;
}

h4 {
    font-size: var(--size-font-h4);
    line-height: var(--size-line-height-h4);
    font-weight: 500;
}

p {
    font-size: var(--size-font-p);
    line-height: var(--size-line-height-p);
    font-weight: 500;
}

.p-small {
    font-size: var(--size-font-small);
    line-height: var(--size-line-height-small);
    font-weight: 400;
}

.p-caption {
    font-size: var(--size-font-caption);
    line-height: var(--size-line-height-caption);
    font-weight: 400;
}

h4.truncate,
p.truncate {
    white-space: nowrap; /* Не переносить строку */
    overflow: hidden; /* Скрывать лишний текст */
    text-overflow: ellipsis; /* Показать "..." */
}

.no-select {
    user-select: none;
    pointer-events: none;
}

.onclick-wrapper {
    cursor: pointer;
}
