:root {
    --profile-red: #EF4444;
    --profile-orange: #F97315;
    --profile-yellow: #E9B306;
    --profile-green: #22C55D;
    --profile-teal: #15B8A6;
    --profile-cyan: #06B6D4;
    --profile-blue: #3C82F6;
    --profile-indigo: #6466F1;
    --profile-violet: #8B5CF6;
    --profile-purple: #A855F7;
    --profile-fuchsia: #D946EF;
    --profile-pink: #EC4899;
    --profile-gray: #6B7280;
}

.light {
    --app-text: #0f0f14 !important;
    --app-link: #1868f2 !important;
    --app-100: #e9e9ec !important;
    --app-200: #FBFBFB !important;
    --app-300: #FBFBFB !important;
    --app-400: #EFEFF0 !important;
    --app-500: #eeeeee !important;
    --app-600: #d4d4da !important;
    --app-700: #dddddd !important;
    --app-800: #8c8c91 !important;
    --app-900: #878798 !important;

    --app-accent: #6366f1;

    --app-blue: #3679f0;
    --app-red: #ee4d3c;
    --app-green: #4dca9a;
    --app-yellow: #fffc5c;
    --app-pink: #ff5bff;
    --app-purple: #895bff;
    --app-orange: #ff9b5b;
    --app-white: #000000;

    --app-dark-blue: #1e4d9e;
    --app-dark-red: #c33f33;
    --app-dark-green: #2c7e4b;
    --app-dark-yellow: #c7b200;
    --app-dark-pink: #c95bff;
    --app-dark-purple: #5f5bff;
    --app-dark-orange: #c86f33;

    .post-content mark {
        color: rgb(88, 81, 11);
        background-color: rgb(255, 248, 111);
    }

    .content,
    .profile-info.bottom {
        border-color: var(--app-600);
    }

    .mask-border {
        background-color: var(--app-600);
    }

    .mask-right,
    .mask-left {
        border-color: var(--app-600);
    }

    .command-palette input {
        border: 1px solid var(--app-800);
    }

    .modal-outer.open,
    .alert-outer.open {
        background-color: #9f9fa361;
    }

    .notification-post .repost {
        border: 1px solid var(--app-900) !important;
    }

    .repost {
        border: 1px solid var(--app-600) !important;
    }

    .section,
    .footer,
    .empty,
    .notification {
        box-shadow: 0 2px 2px 0px #0000001a, inset 0 0px 0 1px var(--app-400);
    }

    .modal-outer.open .modal,
    .alert-outer.open .alert {
        box-shadow: 0 5px 8px #0000001a;
        border-color: var(--app-800);
    }

    .modal-button {
        background-color: var(--app-300);
        border: 1px solid var(--app-600);
    }

    .modal-button:active {
        background-color: var(--app-400);
    }

    .text-input {
        border: 1px solid var(--app-800);
    }

    .command-palette .text-input {
        border: none;
    }

    .upload-image {
        background-color: var(--app-100);
    }

    .upload-image:hover {
        background-color: var(--app-200);
    }

    .crop-controls input[type="range"] {
        background-color: var(--app-600);
    }

    .pfp-section .pfp {
        background-color: var(--app-100);
    }

    .pfp-edit {
        color: #fff;
    }

    .post {
        border-color: var(--app-600);
    }

    .nameplate {
        border-color: var(--app-600);
    }

    .profile-pinned {
        border-bottom: 1px solid var(--app-600);
    }

    .section-button,
    .context {
        box-shadow: 0 2px 2px 0px #0000001a, inset 0 0px 0 1px var(--app-700);
    }

    .more .context {
        box-shadow: none;
    }

    .splash {
        background-color: var(--app-200);
    }

    .jump {
        border-color: var(--app-700);
        box-shadow: 0 5px 10px #00000066;
        transition: transform cubic-bezier(0, -.25, 0, 1.5) 0.2s,
            box-shadow cubic-bezier(0, -.25, 0, 1) 0.2s,
            opacity cubic-bezier(0, -.25, 0, 1) 0.2s;
    }

    .jump:hover {
        border-color: var(--app-700);
        box-shadow: 0 15px 20px #0000003d;
    }

    .jump:active {
        border-color: var(--app-700);
        box-shadow: 0 2px 5px #00000066;
    }
}

.black {
    --app-100: #000;
    --app-200: #121212;
    --app-300: #242424;
    --app-400: #373737;
    --app-500: #4a4a4a;
    --app-600: #5d5d5d;
    --app-700: #707070;
    --app-800: #838383;
    --app-900: #959595;

    .follow-button {
        color: #000;
    }

    .modal,
    .post-input {
        background-color: var(--app-300);
    }
}

.liquid-glass.black {
    --app-100: #000;
    --app-200: rgba(90, 90, 90, 0.2);
    --app-300: rgba(90, 90, 90, 0.25);
    --app-400: rgba(90, 90, 90, 0.3);
    --app-500: rgba(90, 90, 90, 0.35);
    --app-600: rgba(90, 90, 90, 0.4);
    --app-700: rgba(90, 90, 90, 0.45);
    --app-800: rgba(90, 90, 90, 0.5);
    --app-900: rgba(90, 90, 90, 0.55);

    --app-text: #fff;

    .modal-outer.open,
    .alert-outer.open {
        background-color: #0000007c;
    }

    .modal,
    .alert {
        background-color: rgba(4, 4, 4, 0.6);
        color: var(--app-text);
    }
}

@media screen and (max-width: 600px) {

    .black,
    .liquid-glass.black {
        --app-200: #000 !important;

        .back-button,
        .action-button {
            background-color: #0000006d !important;
            border: 1px solid #ffffff2d !important;
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
        }
    }
}