@tailwind base;

:root {
    --white: rgb(255, 255, 255);

    --blue-400: rgb(122, 122, 255);

    --green-100: rgb(227, 255, 242);
    --green-300: rgb(148, 242, 200);
    --green-400: rgb(114, 224, 175);
    --green-500: rgb(34, 212, 146);

    --purple-100: rgb(251, 245, 255);
    --purple-200: rgb(236, 211, 253);
    --purple-300: rgb(214, 188, 250);
    --purple-400: rgb(183, 148, 244);
    --purple-500: rgb(121, 0, 245);
    --purple-600: rgb(113, 7, 220);
    --purple-800: rgb(79, 15, 143);

    --red-100: rgb(255, 235, 243);
    --red-300: rgb(250, 133, 162);
    --red-400: rgb(250, 78, 121);

    --yellow-100: rgb(255, 253, 235);
    --yellow-200: rgb(255, 248, 196);
    --yellow-300: rgb(255, 243, 148);
    --yellow-400: rgb(255, 234, 79);

    --tint-50: rgba(0, 0, 150, 0.015);
    --tint-100: rgba(0, 0, 150, 0.025);
    --tint-200: rgba(0, 0, 100, 0.07);
    --tint-300: rgba(25, 0, 100, 0.1);
    --tint-400: rgba(20, 0, 100, 0.2);
    --tint-500: rgba(30, 20, 90, 0.35);
    --tint-600: rgba(30, 20, 70, 0.5);
    --tint-700: rgba(15, 10, 60, 0.75);

    --gray-50: rgb(252, 252, 253);
    --gray-100: rgb(247, 247, 252);
    --gray-200: rgb(238, 238, 245);
    --gray-300: rgb(232, 229, 239);
    --gray-400: rgb(209, 204, 224);
    --gray-500: rgb(176, 173, 197);
    --gray-600: rgb(142, 137, 162);
    --gray-700: rgb(75, 71, 109);
    --gray-800: rgb(51, 47, 81);

    /* dark theme */

    --dark-white: rgb(38, 38, 50);

    --dark-blue-400: rgb(85, 0, 255);

    --dark-green-100: rgb(32, 97, 90);
    --dark-green-300: rgb(55, 111, 123);
    --dark-green-500: rgb(63, 152, 142);

    --dark-purple-100: rgb(60, 46, 96);
    --dark-purple-200: rgb(81, 50, 128);
    --dark-purple-300: rgb(104, 85, 147);
    --dark-purple-400: rgb(106, 87, 148);
    --dark-purple-500: rgb(126, 107, 167);
    --dark-purple-600: rgb(145, 127, 183);
    --dark-purple-800: rgb(158, 140, 194);

    --dark-red-100: rgb(255, 235, 243);
    --dark-red-300: rgb(250, 133, 162);
    --dark-red-400: rgb(250, 78, 121);

    --dark-yellow-100: rgb(61, 57, 49);
    --dark-yellow-200: rgb(90, 78, 53);
    --dark-yellow-300: rgb(119, 103, 70);
    --dark-yellow-400: rgb(145, 121, 90);

    --dark-tint-50: rgba(240, 240, 245, 0.05);
    --dark-tint-100: rgba(240, 240, 245, 0.075);
    --dark-tint-200: rgba(240, 240, 245, 0.1);
    --dark-tint-300: rgba(240, 240, 245, 0.125);
    --dark-tint-400: rgba(240, 240, 245, 0.25);
    --dark-tint-500: rgba(240, 240, 245, 0.45);
    --dark-tint-600: rgba(240, 240, 245, 0.55);
    --dark-tint-700: rgba(240, 240, 245, 0.65);

    --dark-gray-0: rgb(30, 30, 40);
    --dark-gray-50: rgb(38, 38, 50);
    --dark-gray-100: rgb(48, 48, 58);
    --dark-gray-200: rgb(51, 51, 65);
    --dark-gray-300: rgb(75, 75, 85);
    --dark-gray-400: rgb(142, 142, 160);
    --dark-gray-500: rgb(152, 152, 170);
    --dark-gray-600: rgb(165, 165, 175);
    --dark-gray-700: rgb(216, 216, 223);
    --dark-gray-800: rgb(230, 230, 235);

    --dark-shadow-sm: '0 2px 0 var(--gray-0)';
    --dark-shadow-default: '0 2px 0 var(--gray-50), 2px 4px 0 var(--gray-0)';
    --dark-shadow-lg: '0 2px 0 var(--gray-100), 2px 4px 0 var(--gray-50), 4px 6px 0 var(--gray-0)';
    --dark-shadow-input: 'inset 0 2px 0 var(--gray-100)';
}

html {
    box-sizing: border-box;
    font-size: 14px;
    @apply bg-gray-200;
    @apply overflow-x-hidden;
    @apply overflow-y-scroll;
}

@screen lg {
    html {
        font-size: 16px;
    }
}

/* Exclude iframes like 1Password save modals */
*:not(iframe),
*:after,
*:before {
    position: relative;
}

*:focus {
    outline: 0 !important;
}

body {
    @apply font-sans;
    @apply text-gray-800;
    @apply leading-normal;
    @apply w-full;
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
    html.theme-auto {
        --white: var(--dark-white);

        --blue-400: var(--dark-blue-400);

        --green-100: var(--dark-green-100);
        --green-300: var(--dark-green-300);
        --green-400: var(--dark-green-400);
        --green-500: var(--dark-green-500);

        --purple-100: var(--dark-purple-100);
        --purple-200: var(--dark-purple-200);
        --purple-300: var(--dark-purple-300);
        --purple-400: var(--dark-purple-400);
        --purple-500: var(--dark-purple-500);
        --purple-600: var(--dark-purple-600);
        --purple-800: var(--dark-purple-800);

        --red-100: var(--dark-red-100);
        --red-300: var(--dark-red-300);
        --red-400: var(--dark-red-400);

        --yellow-100: var(--dark-yellow-100);
        --yellow-200: var(--dark-yellow-200);
        --yellow-300: var(--dark-yellow-300);
        --yellow-400: var(--dark-yellow-400);

        --tint-50: var(--dark-tint-50);
        --tint-100: var(--dark-tint-100);
        --tint-200: var(--dark-tint-200);
        --tint-300: var(--dark-tint-300);
        --tint-400: var(--dark-tint-400);
        --tint-500: var(--dark-tint-500);
        --tint-600: var(--dark-tint-600);
        --tint-700: var(--dark-tint-700);

        --gray-0: var(--dark-gray-0);
        --gray-50: var(--dark-gray-50);
        --gray-100: var(--dark-gray-100);
        --gray-200: var(--dark-gray-200);
        --gray-300: var(--dark-gray-300);
        --gray-400: var(--dark-gray-400);
        --gray-500: var(--dark-gray-500);
        --gray-600: var(--dark-gray-600);
        --gray-700: var(--dark-gray-700);
        --gray-800: var(--dark-gray-800);

        --shadow-sm: '0 2px 0 var(--gray-50)';
        --shadow-default: '0 2px 0 var(--gray-100), 2px 4px 0 var(--gray-50)';
        --shadow-lg: '0 2px 0 var(--gray-200), 2px 4px 0 var(--gray-100), 4px 6px 0 var(--gray-50)';
        --shadow-input: 'inset 0 2px 0 var(--gray-100)';
    }

    html.theme-auto {
        background-color: var(--dark-gray-0);
    }

    html.theme-auto .checkbox:before {
        background-color: var(--gray-800);
    }

    html.theme-auto .tab-nav,
    html.theme-auto .dropdown {
        background-color: var(--gray-400);
    }
}

html.theme-dark {
    --white: var(--dark-white);

    --blue-400: var(--dark-blue-400);

    --green-100: var(--dark-green-100);
    --green-300: var(--dark-green-300);
    --green-400: var(--dark-green-400);
    --green-500: var(--dark-green-500);

    --purple-100: var(--dark-purple-100);
    --purple-200: var(--dark-purple-200);
    --purple-300: var(--dark-purple-300);
    --purple-400: var(--dark-purple-400);
    --purple-500: var(--dark-purple-500);
    --purple-600: var(--dark-purple-600);
    --purple-800: var(--dark-purple-800);

    --red-100: var(--dark-red-100);
    --red-300: var(--dark-red-300);
    --red-400: var(--dark-red-400);

    --yellow-100: var(--dark-yellow-100);
    --yellow-200: var(--dark-yellow-200);
    --yellow-300: var(--dark-yellow-300);
    --yellow-400: var(--dark-yellow-400);

    --tint-50: var(--dark-tint-50);
    --tint-100: var(--dark-tint-100);
    --tint-200: var(--dark-tint-200);
    --tint-300: var(--dark-tint-300);
    --tint-400: var(--dark-tint-400);
    --tint-500: var(--dark-tint-500);
    --tint-600: var(--dark-tint-600);
    --tint-700: var(--dark-tint-700);

    --gray-0: var(--dark-gray-0);
    --gray-50: var(--dark-gray-50);
    --gray-100: var(--dark-gray-100);
    --gray-200: var(--dark-gray-200);
    --gray-300: var(--dark-gray-300);
    --gray-400: var(--dark-gray-400);
    --gray-500: var(--dark-gray-500);
    --gray-600: var(--dark-gray-600);
    --gray-700: var(--dark-gray-700);
    --gray-800: var(--dark-gray-800);

    --shadow-sm: '0 2px 0 var(--gray-50)';
    --shadow-default: '0 2px 0 var(--gray-100), 2px 4px 0 var(--gray-50)';
    --shadow-lg: '0 2px 0 var(--gray-200), 2px 4px 0 var(--gray-100), 4px 6px 0 var(--gray-50)';
    --shadow-input: 'inset 0 2px 0 var(--gray-100)';
}

html.theme-dark {
    background-color: var(--dark-gray-0);
}

html.theme-dark .checkbox:before {
    background-color: var(--gray-800);
}

html.theme-dark .tab-nav,
html.theme-dark .dropdown {
    background-color: var(--gray-400);
}