/**
 * AM Toolkit Core
 *
 * Globalne zmienne wizualne, animacje i ustawienia dostępności
 * używane przez wszystkie moduły AM Toolkit.
 */

:root {
    /*
     * Kolory bazowe
     */
    --amt-color-primary: #111111;
    --amt-color-primary-hover: #333333;

    --amt-color-background: #ffffff;
    --amt-color-surface: #ffffff;
    --amt-color-text: #171717;
    --amt-color-text-muted: #686868;
    --amt-color-border: rgba(17, 17, 17, 0.1);

    /*
     * Kolory komunikatów
     */
    --amt-color-success: #31845a;
    --amt-color-success-soft: #edf8f2;

    --amt-color-info: #3976c5;
    --amt-color-info-soft: #edf4fc;

    --amt-color-warning: #c87b22;
    --amt-color-warning-soft: #fff6e8;

    --amt-color-error: #c94d4d;
    --amt-color-error-soft: #fff0f0;

    /*
     * Typografia
     */
    --amt-font-family: inherit;
    --amt-font-size-sm: 13px;
    --amt-font-size-md: 15px;
    --amt-font-size-lg: 17px;

    --amt-font-weight-regular: 400;
    --amt-font-weight-medium: 500;
    --amt-font-weight-semibold: 600;

    --amt-line-height-sm: 1.3;
    --amt-line-height-md: 1.55;

    /*
     * Odstępy
     */
    --amt-space-1: 4px;
    --amt-space-2: 8px;
    --amt-space-3: 12px;
    --amt-space-4: 16px;
    --amt-space-5: 20px;
    --amt-space-6: 24px;

    /*
     * Promienie
     */
    --amt-radius-sm: 10px;
    --amt-radius-md: 16px;
    --amt-radius-lg: 20px;
    --amt-radius-toast: 25px;
    --amt-radius-round: 999px;

    /*
     * Cienie
     */
    --amt-shadow-sm:
        0 4px 14px rgba(17, 17, 17, 0.06);

    --amt-shadow-md:
        0 12px 35px rgba(17, 17, 17, 0.12);

    /*
     * Motion System
     */
    --amt-motion-fast: 160ms;
    --amt-motion-normal: 280ms;
    --amt-motion-slow: 420ms;

    --amt-ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --amt-ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
    --amt-ease-exit: cubic-bezier(0.4, 0, 1, 1);
    --amt-ease-spring: cubic-bezier(0.34, 1.35, 0.64, 1);

    /*
     * Warstwy
     */
    --amt-z-toast: 999999;
    --amt-z-modal: 1000000;
}

/*
 * Motion System
 *
 * Klasy bazowe będą mogły być wykorzystywane przez różne moduły.
 */

@keyframes amt-motion-slide-in-right {
    from {
        opacity: 0;
        transform: translate3d(48px, 0, 0) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes amt-motion-slide-out-right {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }

    to {
        opacity: 0;
        transform: translate3d(48px, 0, 0) scale(0.97);
    }
}

@keyframes amt-motion-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes amt-motion-fade-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes amt-motion-scale-in {
    from {
        opacity: 0;
        transform: scale(0.96);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.amt-motion-slide-in-right {
    animation:
        amt-motion-slide-in-right
        var(--amt-motion-slow)
        var(--amt-ease-enter)
        both;
}

.amt-motion-slide-out-right {
    animation:
        amt-motion-slide-out-right
        var(--amt-motion-normal)
        var(--amt-ease-exit)
        both;
}

.amt-motion-fade-in {
    animation:
        amt-motion-fade-in
        var(--amt-motion-normal)
        var(--amt-ease-standard)
        both;
}

.amt-motion-fade-out {
    animation:
        amt-motion-fade-out
        var(--amt-motion-fast)
        var(--amt-ease-exit)
        both;
}

.amt-motion-scale-in {
    animation:
        amt-motion-scale-in
        var(--amt-motion-normal)
        var(--amt-ease-spring)
        both;
}

/*
 * Dostępność
 *
 * Osoby, które wyłączyły animacje w systemie operacyjnym,
 * nie powinny otrzymywać wsuwających się i skalowanych elementów.
 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
    }

    [class*="amt-motion-"] {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
    }
}