@layer reset, app, ui, forms, spacing;

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* note: app-layer is injected based on route (secure/unsecure) */
@import url('/assets/css/ui.css');
@import url('/assets/css/forms.css');
@import url('/assets/css/spacing.css');

/* Pulled in on _wrapper.ghtml if the user is authenticated. */
/* @import url('/assets/css/secure.css'); */

@layer reset {

    /* Color Palette & Design Tokens */

    :root {
        --text-color: #222;
        --inverse-text-color: white;
        --background-color: white;
        --dark-background-color: #1f1d28;

        --madave-purple: #5F249F;

        --lt-gray: whitesmoke;
        --md-gray: lightgray;
        --dk-gray: gray;
        --lt-black: #2b2b2b;
        --black: #222;
        --white: white;

        --lt-blue: #d0e7ff;
        --md-blue: #9cb9ff;
        --lt-yellow: lightgoldenrodyellow;
        --md-yellow: #ffff93;
        --lt-green: #d4ffd6;
        --md-green: lightgreen;
        --lt-red: #ffa499;
        --md-red: salmon;

        --sb-track-color: var(--dark-background-color);
        --sb-thumb-color: var(--md-gray);
        --sb-size: 6px;

        --border-large: 1rem;
        --border: .66rem;
        --border-small: .5rem;
        --border-minimal: .33rem;
    }

    @supports(corner-shape: squircle) {

        :root {
            --border-large: 2.25rem;
            --border: 2rem;
            --border-small: 1.5rem;
            --border-minimal: 1rem;
        }

        * {
            corner-shape: squircle;
        }
    }


    /* Global Element Resets, Behavior */

    a {
        text-decoration: underline;
        cursor: pointer;
        color: var(--madave-purple);
    }

    html, body {
        margin: 0;
        padding: 0;
        font-family: 'Inter', sans-serif;
        overscroll-behavior: none;
        font-size: 16px;
    }

    /* Use a more-intuitive box-sizing model */
    *, *::before, *::after {
        box-sizing: border-box;
    }

    /* Remove default margin */
    * {
        margin: 0;
    }

    /* Add accessible line-height, standard font-smoothing, and handle text-size-adjust */
    body {
        line-height: 1.5;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        -webkit-text-size-adjust: 100%;
    }

    /* Improve media defaults */
    img, picture, video, canvas, svg {
        display: block;
        max-width: 100%;
    }

    /* Remove built-in form typography styles */
    input, button, textarea, select {
        font: inherit;

        &:focus-visible {
            outline: 2px solid var(--md-blue);
        }
    }

    /* Avoid text overflows */
    p, h1, h2, h3, h4, h5, h6 {
        overflow-wrap: break-word;
    }

    h1, h2, h3, h4, h5, h6 {
        text-box: cap alphabetic;
    }

    h3, h4, h5, h6 {
        margin-bottom: 2rem;
    }

    h3 {
        font-size: 1.75rem;
        font-weight: 500;
    }

    /* Create a root stacking context */
    #root {
        isolation: isolate;
    }

    ::backdrop {
        backdrop-filter: blur(1px);
        background-color: #8c8c8ca3;
    }

    ::-webkit-scrollbar {
        width: var(--sb-size);
        height: var(--sb-size);
    }

    ::-webkit-scrollbar-track {
        background: transparent;
        border-radius: var(--border);
        padding: 2px;
    }

    ::-webkit-scrollbar-thumb {
        background: var(--sb-thumb-color);
        border-radius: var(--border);
    }

    @supports not selector(::-webkit-scrollbar) {
        * {
            scrollbar-color: var(--sb-thumb-color)
               transparent;
        }
    }


    /* Base Utility Classes */

    .no-select {
        user-select: none;
    }


    /* Loading indicator */
    /* Loading indicators for when the loading attribute is 'true' */

    :not(i)[loading="true"] {
        position: relative;
        overflow: hidden; /* Needed for the gradient overlay */
        pointer-events: none;

    }

    :not(i)[loading="true"]::before {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(
                90deg,
                transparent,
                rgba(255, 255, 255, 0.6),
                transparent
        ); /* Gradient with transparent areas */
        animation: gradientOverlay 2s infinite both;
        animation-delay: 250ms;
    }

    @keyframes gradientOverlay {
        0% {
            opacity: 80%;
            left: -100%;
        }
        100% {
            opacity: 80%;
            left: 100%;
        }
    }

    i[loading=true] {
        animation: pulse 2s infinite both;
        pointer-events: none;
        animation-delay: 250ms;
    }

    @keyframes pulse {
        0% {
            opacity: 1;
        }
        50% {
            opacity: 0.5;
        }
        100% {
            opacity: 1;
        }
    }


}