@import "tailwindcss";

@plugin "@tailwindcss/typography";
@plugin "@tailwindcss/forms";

@source "../../components/*";

@theme {
    --color-gray-50: #fafafa;
    --color-gray-100: #f8f8f7;
    --color-gray-200: #f3f0eb;
    --color-gray-300: #d6d2cd;
    --color-gray-400: #b3b3b3;
    --color-gray-500: #969696;
    --color-gray-600: #787878;
    --color-gray-700: #595959;
    --color-gray-800: #3b3b3b;
    --color-gray-900: #1f1f1f;
    --color-gray-950: #0f0f0f;

    --color-indigo-50: #eaebf5;
    --color-indigo-100: #d5d8eb;
    --color-indigo-200: #a8add6;
    --color-indigo-300: #7f86c3;
    --color-indigo-400: #525bad;
    --color-indigo-500: #3e4584;
    --color-indigo-600: #2a2f59;
    --color-indigo-700: #1f2342;
    --color-indigo-800: #15182d;
    --color-indigo-900: #0a0b15;
    --color-indigo-950: #05050a;

    --color-blue-50: #e9f6fc;
    --color-blue-100: #d2eef9;
    --color-blue-200: #a5ddf3;
    --color-blue-300: #7dcded;
    --color-blue-400: #50bce7;
    --color-blue-500: #24aae1;
    --color-blue-600: #198bb8;
    --color-blue-700: #13698b;
    --color-blue-800: #0c445a;
    --color-blue-900: #06222d;
    --color-blue-950: #031116;

    --color-yellow-50: #fffcf0;
    --color-yellow-100: #fff8dc;
    --color-yellow-200: #ffeea8;
    --color-yellow-300: #ffe270;
    --color-yellow-400: #ffd83d;
    --color-yellow-500: #ffce0a;
    --color-yellow-600: #d1a700;
    --color-yellow-700: #9e7e00;
    --color-yellow-800: #6b5600;
    --color-yellow-900: #332900;
    --color-yellow-950: #191400;
}

@layer components {
    html {
        font-size: 15px;

        @screen md {
            font-size: 16px;
        }
    }

    body:has(dialog[data-dialog-target="dialog"][open]) {
        overflow: hidden;
    }

    /* Customize the dialog backdrop */
    dialog {
        box-shadow: 0 0 0 100vw rgb(0 0 0 / 0.5);

        &::backdrop {
            background-color: var(--color-gray-950);
            opacity: 0.4;
        }
    }

    .callout {
        background-color: var(--color-gray-100);
        border: 1px solid var(--color-gray-200);
        border-radius: var(--radius-md);
        color: var(--color-gray-900);
        font-size: var(--text-base);
        padding: calc(var(--spacing) * 4) calc(var(--spacing) * 4);

        &.callout--info {
            background-color: var(--color-blue-100);
            border-color: var(--color-blue-200);
            color: var(--color-blue-900);
        }

        &.callout--success {
            background-color: var(--color-green-100);
            border-color: var(--color-green-200);
            color: var(--color-green-900);
        }

        &.callout--notice {
            background-color: var(--color-yellow-100);
            border-color: var(--color-yellow-200);
            color: var(--color-yellow-900);
        }

        &.callout--danger {
            background-color: var(--color-red-100);
            border-color: var(--color-red-200);
            color: var(--color-red-900);
        }
    }

    input[type="submit"] {
        background-color: var(--color-indigo-500);
        border: 1px solid var(--color-indigo-500);
        border-radius: var(--radius-md);
        color: var(--color-gray-50);
        cursor: pointer;
        display: inline-block;
        font-weight: var(--font-weight-medium);
        padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
        text-align: center;
        transition: background-color 200ms, border-color 200ms;

        &:hover:not(:disabled) {
            background-color: var(--color-indigo-600);
            border-color: var(--color-indigo-600);
        }

        &:focus {
            box-shadow: var(--shadow-md);
            outline: none;
        }

        &:disabled {
            background-color: var(--color-gray-300);
            border-color: var(--color-gray-300);
            cursor: not-allowed;
        }
    }
}