:root{
    --color-success: #5DC190;
    --color-info: #5FA1E7;
    --color-warning: #F3A787;
    --color-danger: #CA60AE;
    --color-text: #121212;
    --color-background: #e5e5e5;
    --color-border: #a4a4a4;
}

html{
    min-height: 100dvh;
    min-width: 100dvw;
    font-family: "DejaVu Sans", Helvetica, Arial, sans-serif;
}

body{
    min-height: 100dvh;
    min-width: 100dvw;
    color: var(--color-text);
    background-color: var(--color-background);
}

.dark-mode{
    --color-text: #e5e5e5;
    --color-background: #121212;
    --color-border: #575757;
}

.success{
    color: var(--color-success);
}

.info{
    color: var(--color-info);
}

.warning{
    color: var(--color-warning);
}

.danger{
    color: var(--color-danger);
}

/* Input */
input{
    all: unset;
}

.input {
    display: flex;
    position: relative;
    gap: 0.4em;
    align-items: center;
    
    input {
        padding: 0.4em 0.2em;
        flex: 1;
    }
}

.input {
    &:has(input[type="password"]),
    &:has(input[type="search"]),
    &:has(input[type="text"]) {
        &:focus::after,
        &:focus-visible::after,
        &:focus-within::after,
        &::before {
            position: absolute;
            content: "";
            left: 0;
            right: 0;
            bottom: 0;
            border-bottom: 2px solid var(--color-text);
        }
        
        &::before {
            opacity: 40%;
        }
    }
}

.button,
button {
    all: unset;
    
    cursor: pointer;
    
    padding: 0.3em;
    border:1px solid var(--color-text);
    border-radius: 0.3em;
    
    display: flex;
    gap: 0.2em;
    justify-content: center;
    align-items: center;
}

.input-group {
    display: flex;
    flex-direction: row;
    gap: 0.2em;
    
    > .input {
        border:1px solid var(--color-text);
        border-radius: 0;
        padding-inline: 0.4em;
        
        &::after,
        &::before {
            display: none;
        }
        
        &:first-child{
            border-top-left-radius: 0.4em;
            border-bottom-left-radius: 0.4em;
        }
        
        &:last-child{
            border-top-right-radius: 0.4em;
            border-bottom-right-radius: 0.4em;
        }
    }
}

.full-center,
.flex-gap-center {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.2em;
}

.full-center {
    flex-direction: column;
    gap: 2rem;
    flex: 1;
}

.app-logo {
    display: flex;
    font-size: 1.6rem;
    align-items: center;
    gap: 0.4em;
}