: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;
    --app-link: #1868f2;
    --app-100: #e9e9ec;
    --app-200: #FBFBFB;
    --app-300: #FBFBFB;
    --app-400: #EFEFF0;
    --app-500: #eeeeee;
    --app-600: #d4d4da;
    --app-700: #dddddd;
    --app-800: #8c8c91;
    --app-900: #878798;

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

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