@import "tailwindcss";

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

body {
    color-scheme: light;
}

body[data-theme="dark"] {
    color-scheme: dark;
}

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

    --color-primary-100: light-dark(rgb(250 250 250), rgb(28 28 28));
    --color-primary-200: light-dark(rgb(240 240 240), rgb(32 32 32));
    --color-primary-300: light-dark(rgb(230 230 230), rgb(38 38 38));
    --color-primary-400: light-dark(rgb(220 220 220), rgb(44 44 44));
    --color-primary-500: light-dark(rgb(210 210 210), rgb(50 50 50));
    --color-primary-600: light-dark(rgb(200 200 200), rgb(56 56 56));
    --color-primary-700: light-dark(rgb(190 190 190), rgb(62 62 62));
    --color-primary-800: light-dark(rgb(180 180 180), rgb(68 68 68));
    --color-primary-900: light-dark(rgb(170 170 170), rgb(74 74 74));

    --color-contrast-100: light-dark(rgb(220 220 220), rgb(25 25 25));
    --color-contrast-200: light-dark(rgb(200 200 200), rgb(50 50 50));
    --color-contrast-300: light-dark(rgb(180 180 180), rgb(80 80 80));
    --color-contrast-400: light-dark(rgb(160 160 160), rgb(110 110 110));
    --color-contrast-500: light-dark(rgb(140 140 140), rgb(140 140 140));
    --color-contrast-600: light-dark(rgb(110 110 110), rgb(160 160 160));
    --color-contrast-700: light-dark(rgb(80 80 80), rgb(180 180 180));
    --color-contrast-800: light-dark(rgb(60 60 60), rgb(200 200 200));
    --color-contrast-900: light-dark(rgb(30 30 30), rgb(220 220 220));

    --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;
    }
}
