@import "tailwindcss";

@import "./animations.css";
@import "./other.utils.css";
@import "./typo.utils.css";
@import "./button.comp.css";
@import "./input.comp.css";
@import "./fonts/iran-yekan-x.css";
@import "./fonts/morabba.css";
@import "./fonts/yekan-bakh.css";

@theme {
    /* COLORS */
    --color-slate-50: hsl(210, 40%, 98%);
    --color-slate-100: hsl(210, 40%, 96%);
    --color-slate-200: hsl(214, 32%, 91%);
    --color-slate-300: hsl(213, 27%, 84%);
    --color-slate-400: hsl(215, 20%, 65%);
    --color-slate-500: hsl(215, 16%, 47%);
    --color-slate-600: hsl(215, 19%, 35%);
    --color-slate-700: hsl(215, 25%, 27%);
    --color-slate-800: hsl(217, 33%, 17%);
    --color-slate-900: hsl(222, 47%, 11%);
    --color-slate-950: hsl(229, 84%, 5%);

    --color-blue-50: hsl(214, 100%, 97%);
    --color-blue-100: hsl(214, 95%, 93%);
    --color-blue-200: hsl(213, 97%, 87%);
    --color-blue-300: hsl(212, 96%, 78%);
    --color-blue-400: hsl(213, 94%, 68%);
    --color-blue-500: hsl(217, 91%, 60%);
    --color-blue-600: hsl(221, 83%, 53%);
    --color-blue-700: hsl(224, 76%, 48%);
    --color-blue-800: hsl(226, 71%, 40%);
    --color-blue-900: hsl(224, 64%, 33%);
    --color-blue-950: hsl(226, 57%, 21%);

    --color-cyan-50: hsl(183, 100%, 96%);
    --color-cyan-100: hsl(185, 96%, 90%);
    --color-cyan-200: hsl(185, 96%, 90%);
    --color-cyan-300: hsl(187, 92%, 69%);
    --color-cyan-400: hsl(188, 86%, 53%);
    --color-cyan-500: hsl(189, 94%, 43%);
    --color-cyan-600: hsl(192, 91%, 36%);
    --color-cyan-700: hsl(193, 82%, 31%);
    --color-cyan-800: hsl(194, 70%, 27%);
    --color-cyan-900: hsl(196, 64%, 24%);
    --color-cyan-950: hsl(197, 79%, 15%);

    --color-orange-50: hsl(33, 100%, 96%);
    --color-orange-100: hsl(34, 100%, 92%);
    --color-orange-200: hsl(32, 98%, 83%);
    --color-orange-300: hsl(31, 97%, 72%);
    --color-orange-400: hsl(27, 96%, 61%);
    --color-orange-500: hsl(25, 95%, 53%);
    --color-orange-600: hsl(21, 90%, 48%);
    --color-orange-700: hsl(17, 88%, 40%);
    --color-orange-800: hsl(15, 79%, 34%);
    --color-orange-900: hsl(15, 75%, 28%);
    --color-orange-950: hsl(13, 81%, 15%);

    --color-success-50: hsl(138, 76%, 97%);
    --color-success-100: hsl(141, 84%, 93%);
    --color-success-200: hsl(141, 79%, 85%);
    --color-success-300: hsl(142, 77%, 73%);
    --color-success-400: hsl(142, 69%, 58%);
    --color-success-500: hsl(142, 71%, 45%);
    --color-success-600: hsl(142, 76%, 36%);
    --color-success-700: hsl(142, 72%, 29%);
    --color-success-800: hsl(143, 64%, 24%);
    --color-success-900: hsl(144, 61%, 20%);
    --color-success-950: hsl(145, 80%, 10%);

    --color-warning-50: hsl(55, 92%, 95%);
    --color-warning-100: hsl(55, 97%, 88%);
    --color-warning-200: hsl(53, 98%, 77%);
    --color-warning-300: hsl(50, 98%, 64%);
    --color-warning-400: hsl(48, 96%, 53%);
    --color-warning-500: hsl(45, 93%, 47%);
    --color-warning-600: hsl(41, 96%, 40%);
    --color-warning-700: hsl(35, 92%, 33%);
    --color-warning-800: hsl(32, 81%, 29%);
    --color-warning-900: hsl(28, 73%, 26%);
    --color-warning-950: hsl(26, 83%, 14%);

    --color-danger-50: hsl(0, 86%, 97%);
    --color-danger-100: hsl(0, 93%, 94%);
    --color-danger-200: hsl(0, 96%, 89%);
    --color-danger-300: hsl(0, 94%, 82%);
    --color-danger-400: hsl(0, 91%, 71%);
    --color-danger-500: hsl(0, 84%, 60%);
    --color-danger-600: hsl(0, 72%, 51%);
    --color-danger-700: hsl(0, 74%, 42%);
    --color-danger-800: hsl(0, 70%, 35%);
    --color-danger-900: hsl(0, 63%, 31%);
    --color-danger-950: hsl(0, 75%, 15%);

    /* BORDER RADIUS */
    --radius-50: 5px;
    --radius-100: 10px;
    --radius-150: 15px;
    --radius-200: 20px;
    --radius-250: 25px;
    --radius-360: 99999999px;

    /* FONT WEIGHT */
    --font-weight-extrablack: 950;
    --font-weight-heavy: 1000;

    /* FONT FAMILY */
    --font-lato: "Lato", sans-serif;
    --font-inter: "Inter", sans-serif;
    --font-dmsans: "DM Sans", sans-serif;
    --font-iran-yekan-x: "IRANYekanXVF", "sans-serif";
    --font-yekan-bakh: "YekanBakh", "sans-serif";
    --font-morabba: "Morabba", "sans-serif";

    /* BREAKPOINTS */
    --breakpoint-3xl: 1700px;
    --breakpoint-2xs: 400px;
    --breakpoint-xs: 480px;

    /* ANIMATIONS */
    --animate-marquee: marquee 3s linear infinite;
    --animate-slide-down: slideDown 300ms ease-out;
    --animate-slide-up: slideUp 300ms ease-out;
    --animate-overlay-show: overlayShow 150ms ease-in;
    --animate-content-show: contentShow 150ms ease-in;

    --animate-toast-hide: toastHide 100ms ease-in;
    --animate-toast-in: toastSlideIn 600ms cubic-bezier(0.16, 1, 0.3, 1);
    --animate-toast-out: toastSlideOut 200ms ease-out;

    @keyframes marquee {
        to {
            transform: translateX(50%);
        }
    }

    @keyframes slideDown {
        from {
            height: 0;
        }
        to {
            height: var(--reka-accordion-content-height);
        }
    }

    @keyframes slideUp {
        from {
            height: var(--reka-accordion-content-height);
        }
        to {
            height: 0;
        }
    }

    @keyframes overlayShow {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }

    @keyframes contentShow {
        from {
            opacity: 0;
            transform: translate(-50%, -48%) scale(0.96);
        }
        to {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
        }
    }

    @keyframes toastHide {
        from { opacity: 1 }
        to { opacity: 0 }
    }

    @keyframes toastSlideIn {
        from {
            opacity: 0;
            transform: translateX(calc(100% + var(--viewport-padding)))
        }
        to {
            opacity: 1;
            transform: translateX(0)
        }
    }

    @keyframes toastSlideOut {
        from {
            opacity: 1;
            transform: translateX(var(--reka-toast-swipe-end-x))
        }
        to {
            opacity: 0;
            transform: translateX(calc(100% + var(--viewport-padding)))
        }
    }
}

/* CONTAINER */

@utility container {
    @apply mx-auto;
    padding-inline: 3rem;
    @screen xl {
        padding-inline: 5rem;
    }
}