@import "tailwindcss";

@custom-variant dark (&:where([data-theme='dark'], [data-theme='dark'] *));

:root {
    --mb-color-primary-100: rgb(250 250 250);
    --mb-color-primary-200: rgb(240 240 240);
    --mb-color-primary-300: rgb(230 230 230);
    --mb-color-primary-400: rgb(220 220 220);
    --mb-color-primary-500: rgb(210 210 210);
    --mb-color-primary-600: rgb(200 200 200);
    --mb-color-primary-700: rgb(190 190 190);
    --mb-color-primary-800: rgb(180 180 180);
    --mb-color-primary-900: rgb(170 170 170);

    --mb-color-contrast-100: rgb(220 220 220);
    --mb-color-contrast-200: rgb(200 200 200);
    --mb-color-contrast-300: rgb(180 180 180);
    --mb-color-contrast-400: rgb(160 160 160);
    --mb-color-contrast-500: rgb(140 140 140);
    --mb-color-contrast-600: rgb(110 110 110);
    --mb-color-contrast-700: rgb(80 80 80);
    --mb-color-contrast-800: rgb(60 60 60);
    --mb-color-contrast-900: rgb(30 30 30);
}

[data-theme="dark"] {
    --mb-color-primary-100: rgb(28 28 28);
    --mb-color-primary-200: rgb(32 32 32);
    --mb-color-primary-300: rgb(38 38 38);
    --mb-color-primary-400: rgb(44 44 44);
    --mb-color-primary-500: rgb(50 50 50);
    --mb-color-primary-600: rgb(56 56 56);
    --mb-color-primary-700: rgb(62 62 62);
    --mb-color-primary-800: rgb(68 68 68);
    --mb-color-primary-900: rgb(74 74 74);

    --mb-color-contrast-100: rgb(25 25 25);
    --mb-color-contrast-200: rgb(50 50 50);
    --mb-color-contrast-300: rgb(80 80 80);
    --mb-color-contrast-400: rgb(110 110 110);
    --mb-color-contrast-500: rgb(140 140 140);
    --mb-color-contrast-600: rgb(160 160 160);
    --mb-color-contrast-700: rgb(180 180 180);
    --mb-color-contrast-800: rgb(200 200 200);
    --mb-color-contrast-900: rgb(220 220 220);
}

@theme inline {
    --color-accent: rgb(255 29 37);

    --color-primary-100: var(--mb-color-primary-100);
    --color-primary-200: var(--mb-color-primary-200);
    --color-primary-300: var(--mb-color-primary-300);
    --color-primary-400: var(--mb-color-primary-400);
    --color-primary-500: var(--mb-color-primary-500);
    --color-primary-600: var(--mb-color-primary-600);
    --color-primary-700: var(--mb-color-primary-700);
    --color-primary-800: var(--mb-color-primary-800);
    --color-primary-900: var(--mb-color-primary-900);

    --color-contrast-100: var(--mb-color-contrast-100);
    --color-contrast-200: var(--mb-color-contrast-200);
    --color-contrast-300: var(--mb-color-contrast-300);
    --color-contrast-400: var(--mb-color-contrast-400);
    --color-contrast-500: var(--mb-color-contrast-500);
    --color-contrast-600: var(--mb-color-contrast-600);
    --color-contrast-700: var(--mb-color-contrast-700);
    --color-contrast-800: var(--mb-color-contrast-800);
    --color-contrast-900: var(--mb-color-contrast-900);

    --shadow-t-lg: 0px -4px 6px -1px rgba(0, 0, 0, 0.1);
}

@layer base {
    *,
    *::before,
    *::after {
        font-family: Inter, sans-serif;
        box-sizing: border-box;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-family:
            Roboto Slab,
            serif;
    }

    body {
        @apply bg-primary-100;
        text-rendering: optimizeSpeed;
        line-height: 1.5;
    }

    a:not([class]) {
        text-decoration-skip-ink: auto;
    }

    img,
    picture,
    video,
    svg {
        max-width: 100%;
        display: block;
    }

    input,
    button,
    textarea,
    select {
        font: inherit;
    }

    @media (prefers-reduced-motion: reduce) {
        html:focus-within {
            scroll-behavior: auto;
        }
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }
    }

    pre {
        @apply rounded-md bg-cyan-900 p-8 text-gray-200;
    }

    .card {
        @apply rounded-md border-2 border-contrast-100 bg-primary-100;
    }

    input,
    select,
    textarea {
        @apply mb-3 mt-1 w-full rounded-md border-2 border-contrast-100 bg-primary-100 px-3 py-2;
    }

    label > span {
        @apply text-base text-contrast-800 md:text-lg;
    }
}
