:root {
    --background: #121212;
    --background-text: #ffffff;
    
    --surface: #121212;
    --surface-text: #ffffff;

    --surface-two: #252525;

    --error: #CF6679;
    --error-text: #000000;
    
    --primary-color: #4e76aa;
    --primary-text: #ffffff;

    --secondary-color: #03DAC6;
    --secondary-text: #000000;

    --elevation-low: 0 1px 3px rgba(0, 0, 0, 0.2);
    --elevation-medium: 0 3px 6px rgba(0, 0, 0, 0.3);
    --elevation-high: 0 10px 20px rgba(0, 0, 0, 0.4);

    --radius: 10px;

}
@media (prefers-color-scheme: dark) {
    body, html {
        background: var(--background) !important;
    }

    .uk-card {
        background: var(--surface);
        color: var(--surface-text);
        box-shadow: var(--elevation-low);
        border-radius: var(--radius);
    }

    .uk-card.uk-card-default::before {
        content: '';
        position: absolute;
        border-radius: var(--radius);
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: rgba(255, 255, 255, 0.05);
        pointer-events: none;
    }

    .uk-input.uk-disabled {
        background-color: var(--background-secondary);
    }

    .uk-input {
        border-color: var(--border-color);
        box-shadow: var(--elevation-low);
    }
}