@import "tailwindcss";

@theme {
    --spacing: 4px;
    /* Text colors */
    /* text-colors */
    --color-default: #414561;
    --color-secondary: #737899;
    --color-tertiary: rgba(115, 120, 153, 0.6);
    --color-disabled: rgba(115, 120, 153, 0.6);
    --color-accent: #6C63FB;
    --color-accent-hover: #554BEB;
    --color-critical: #BF2217;
    --color-caution: #B54708;
    --color-success: #008335;
    --color-inverse: #FFFFFF;
    --color-calendar-days-of-week: #858FA3;
    --color-additional-1: #529AE5;
    --color-additional-2: #63D290;
    /* Icon colors */
    /* stroke-icon */
    --color-icon-default: #414561;
    --color-icon-secondary: #737899;
    --color-icon-tertiary: rgba(115, 120, 153, 0.6);
    --color-icon-accent: #6C63FB;
    --color-icon-accent-hover: #554BEB;
    --color-icon-critical: #F44236;
    --color-icon-caution: #FF981A;
    --color-icon-success: #63D290;
    --color-icon-inverse: #FFFFFF;
    /* background colors */
    /* bg-surface */
    --color-surface-default-grey: #F6F6F7;
    --color-surface-white: #FFFFFF;
    --color-surface-neutral-filled: #737899;
    --color-surface-neutral-large: rgba(115, 120, 153, 0.5);
    --color-surface-neutral-high: rgba(115, 120, 153, 0.2);
    --color-surface-neutral-med: rgba(115, 120, 153, 0.09);
    --color-surface-neutral-low: rgba(115, 120, 153, 0.06);
    --color-surface-accent-main: #6C63FB;
    --color-surface-accent-hover: #554BEB;
    --color-surface-accent-med: rgba(108, 99, 251, 0.14);
    --color-surface-accent-low: rgba(108, 99, 251, 0.08);
    --color-surface-critical-high: #F44236;
    --color-surface-critical-med: rgba(244, 66, 54, 0.14);
    --color-surface-critical-low: rgba(244, 66, 54, 0.08);
    --color-surface-caution-main: #FF981A;
    --color-surface-caution-low: rgba(255, 152, 26, 0.1);
    --color-surface-success-main: #63D290;
    --color-surface-success-low: rgba(99, 210, 144, 0.1);
    --color-surface-modal: #00000080;
    /* Border colors */
    /* border-br */
    --color-br-default: #414561;
    --color-br-default-grey: #F6F6F7;
    --color-br-secondary: #737899;
    --color-br-high: rgba(115, 120, 153, 0.25);
    --color-br-med: rgba(115, 120, 153, 0.1);
    --color-br-accent: #6C63FB;
    --color-br-critical: #F44236;
    --color-br-inverse: #FFFFFF;
    /* Font families */
    --font-sans: Gilroy, Inter, system-ui, sans-serif;
    --font-heading: Gilroy, Poppins, Inter, sans-serif;
    --font-body: Gilroy, Inter, system-ui, sans-serif;
    /* Text variables */
    --text-h2: 32px;
    --text-h2--line-height: 36px;
    --text-h2--font-weight: 600;
    --text-h2--letter-spacing: 0px;
    --text-h3: 24px;
    --text-h3--line-height: 28px;
    --text-h3--font-weight: 600;
    --text-h3--letter-spacing: 0px;
    --text-h4: 20px;
    --text-h4--line-height: 24px;
    --text-h4--font-weight: 600;
    --text-h4--letter-spacing: 0px;
    --text-h5: 16px;
    --text-h5--line-height: 22px;
    --text-h5--font-weight: 600;
    --text-h5--letter-spacing: 0px;
    --text-h6: 14px;
    --text-h6--line-height: 20px;
    --text-h6--font-weight: 600;
    --text-h6--letter-spacing: 0px;
    --text-body-m: 16px;
    --text-body-m--line-height: 22px;
    --text-body-m--font-weight: 400;
    --text-body-m--letter-spacing: 0px;
    --text-body-m-strong: 16px;
    --text-body-m-strong--line-height: 22px;
    --text-body-m-strong--font-weight: 500;
    --text-body-m-strong--letter-spacing: 0px;
    --text-body-s: 14px;
    --text-body-s--line-height: 20px;
    --text-body-s--font-weight: 400;
    --text-body-s--letter-spacing: 0px;
    --text-body-s-strong: 14px;
    --text-body-s-strong--line-height: 20px;
    --text-body-s-strong--font-weight: 500;
    --text-body-s-strong--letter-spacing: 0px;
    --text-caption: 12px;
    --text-caption--line-height: 16px;
    --text-caption--font-weight: 400;
    --text-caption--letter-spacing: 3%;
    --text-caption-strong: 12px;
    --text-caption-strong--line-height: 16px;
    --text-caption-strong--font-weight: 600;
    --text-caption-strong--letter-spacing: 3%;
    --text-button: 16px;
    --text-button--line-height: 16px;
    --text-button--font-weight: 600;
    --text-button--letter-spacing: 0%;
    --text-button-small: 14px;
    --text-button-small--line-height: 14px;
    --text-button-small--font-weight: 600;
    --text-button-small--letter-spacing: 0%;
    --text-input: 16px;
    --text-input--line-height: 24px;
    --text-input--font-weight: 400;
    --text-input--letter-spacing: 0%;
    --text-tab: 16px;
    --text-tab--line-height: 16px;
    --text-tab--font-weight: 500;
    --text-tab--letter-spacing: 0%;
    --text-avatar: 16px;
    --text-avatar--line-height: 18px;
    --text-avatar--font-weight: 600;
    --text-avatar--letter-spacing: 2%;
}

/* === КАСТОМНЫЕ ШРИФТЫ === */
@font-face {
    font-family: 'Gilroy';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url('/fonts/Gilroy-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Gilroy';
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    src: url('/fonts/Gilroy-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'Gilroy';
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    src: url('/fonts/Gilroy-SemiBold.ttf') format('truetype');
}

@layer base {
    html {
        line-height: 1.15;
        -webkit-text-size-adjust: 100%;
    }

    * {
        box-sizing: border-box;
    }

    p, ul, ol, blockquote {
/*        margin: 0;
        padding: 0;
        margin-block-start: 0;
        margin-block-end: 0;*/
    }

    ul, ol {
        list-style: none;
    }

    body {
        @apply font-body text-default;
    }

    /* Теперь можно использовать утилитарные классы */
    h1, h2, h3, h4, h5, h6 {
        @apply font-heading text-default;
    }

    /* определение этого стиля для h1 - костыль для страницы TermsOfUse. Необходимо пересмотреть подход к этому статическому файлу.*/
    h1 {
        @apply text-h2 mb-6;
    }

    h2 {
        @apply text-h2;
    }

    h3 {
        @apply text-h3;
    }

    h4 {
        @apply text-h4;
    }

    h5 {
        @apply text-h5;
    }

    h6 {
        @apply text-h6;
    }
}

@layer components {
    button {
        @apply text-center border-none inline-flex self-start items-center rounded-lg transition-all duration-200;
    }

    button:hover {
        @apply cursor-pointer;
    }

    button:disabled {
        @apply bg-surface-neutral-low cursor-not-allowed;
    }

    /* _______________________________*/

    input {
        @apply text-input text-default text-left py-3 px-4 border rounded-lg appearance-none outline-none shadow-none;
    }

    input:focus {
        @apply outline-none;
    }

    input::placeholder {
        @apply text-disabled opacity-100 transition-colors duration-200 ease-in-out;
    }

    input:-webkit-autofill {
        box-shadow: 0 0 0px 1000px var(--color-surface-default-grey) inset !important;
        -webkit-text-fill-color: inherit !important;
    }

    input::-ms-reveal,
    input::-ms-clear {
        display: none !important;
        width: 0;
        height: 0;
    }

    /* _______________________________*/

    ::-webkit-scrollbar {
        @apply w-2;
    }

    ::-webkit-scrollbar-track {
        @apply bg-transparent;
    }

    ::-webkit-scrollbar-thumb {
        @apply rounded bg-surface-neutral-large;
    }

    ::-webkit-scrollbar-thumb:hover {
        @apply bg-surface-neutral-filled;
    }

    /* _______________________________*/

    .navlink-icon {
        @apply stroke-icon-secondary;
    }

    .text-tab {
        @apply text-secondary;
        font-size: 16px;
        line-height: 16px;
        font-weight: 500;
        letter-spacing: 0;
    }

    .active-navlink {
        @apply text-tab rounded-[18px] bg-surface-neutral-med;
    }

    .active-navlink .text-tab {
        @apply text-default;
    }

    .active-navlink .navlink-icon {
        @apply stroke-icon-default;
    }

    @keyframes toast-glide-in {
        from {
            opacity: 0;
            transform: translateY(20px);
            margin-top: -60px;
        }

        to {
            opacity: 1;
            transform: translateY(0);
            margin-top: 0;
        }
    }

    @keyframes toast-glide-out {
        from {
            opacity: 1;
            transform: translateY(0);
            margin-top: 0;
        }

        to {
            opacity: 0;
            transform: translateY(-20px);
            margin-top: -60px;
        }
    }

    .animate-toast-glide-in {
        animation: toast-glide-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    .animate-toast-glide-out {
        animation: toast-glide-out 0.4s ease-in forwards;
    }
}