@import "tailwindcss";
@source "../templates/*.templ";
@plugin "@iconify/tailwind4" {
    scale: 1.5;
}

@theme {
    --color-accent-50: #e7fdea;
    --color-accent-100: #cbfbd1;
    --color-accent-200: #9cf7a8;
    --color-accent-300: #68f37a;
    --color-accent-400: #33ef4d;
    --color-accent-500: #11db2d;
    --color-accent-600: #0eaf23;
    --color-accent-700: #0a851b;
    --color-accent-800: #075a12;
    --color-accent-900: #032b09;
    --color-accent-950: #021805;
    --color-accent: #0eaf23;
    --color-text-50: #f7f8f7;
    --color-text-100: #f2f3f2;
    --color-text-200: #e2e4e2;
    --color-text-300: #d2d6d2;
    --color-text-400: #c2c7c2;
    --color-text-500: #afb6af;
    --color-text-600: #97a097;
    --color-text-700: #7d877d;
    --color-text-800: #5a625a;
    --color-text-900: #161816;
    --color-text-950: #000000;
}

@layer components {
    .grid-main {
        display: grid;
        grid-template-columns: 2fr auto 1fr;
        align-items: stretch;
    }

    .grid-sub {
        display: grid;
        grid-template-columns: subgrid;
        grid-column: 1 / -1;
        border-color: var(--color-neutral-400);
        transition: background-color 0.2s ease-in-out;
    }

    .grid-sub.responsive {
        display: flex;
        flex-direction: column;
    }

    .grid-sub:hover {
        background-color: var(--color-neutral-200);
    }

    .grid-cell {
        padding: calc(var(--spacing) * 2);
        border-color: var(--color-neutral-400);
    }

    .btn {
        width: 100%;
        cursor: pointer;
        border-radius: var(--radius-md);
        color: var(--color-neutral-800);
        font-size: var(--text-sm);
        text-align: center;
        padding: calc(var(--spacing) * 2);
        border-style: var(--tw-border-style);
        border-width: 1px;
        border-color: var(--color-neutral-800);
        transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration));
    }

    .btn:hover {
        color: var(--color-white);
        background-color: var(--color-neutral-700);
    }

    .btn:disabled {
        opacity: 50%;
        pointer-events: none;
    }

    .btn:active,
    .btn:focus {
        background-color: var(--color-neutral-700);
    }

    @media (width >=48rem) {
        .grid-main {
            grid-template-columns: repeat(5, 1fr);
            margin: 0 10%;
        }

        .grid-sub.responsive {
            display: grid;
        }

        .btn {
            padding-inline: calc(var(--spacing) * 4);
        }
    }
}