:root {
    /* Light theme colors */
    --bg-gradient: linear-gradient(45deg, #fdfbfb 0%, #e2e1e1 100%);
    --text-color: #1f2328;
    --input-bg: #fff;
    --input-border: #fff;
    --input-text: #1f2328;
    --input-placeholder: #999;
    --btn-bg: #1f2328;
    --btn-text: #fff;
    --clear-color: #888;
    --clear-hover-bg: rgba(0, 0, 0, 0.06);
    --clear-hover-color: #222;
    --droplet-color: #1f2328;
    --footer-text: #fff;
    --footer-text-shadow: #555;
}

@media (prefers-color-scheme: dark) {
    :root {
        /* Dark theme colors */
        --bg-gradient: linear-gradient(45deg, #1a1a1a 0%, #2d2d2d 100%);
        --text-color: #e0e0e0;
        --input-bg: #2d2d2d;
        --input-border: #2d2d2d;
        --input-text: #e0e0e0;
        --input-placeholder: #888;
        --btn-bg: #404040;
        --btn-text: #e0e0e0;
        --clear-color: #999;
        --clear-hover-bg: rgba(255, 255, 255, 0.1);
        --clear-hover-color: #ddd;
        --droplet-color: #404040;
        --footer-text: #000;
        --footer-text-shadow: #515151;
    }
}

/* Theme-aware styles */
body {
    background-image: var(--bg-gradient);
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s;
}

.url {
    color: var(--input-text);
    border: 8px solid var(--input-border);
    background-color: var(--input-bg);
}

.url::placeholder {
    color: var(--input-placeholder);
}

.url::-webkit-input-placeholder {
    color: var(--input-placeholder);
}

.url::-moz-placeholder {
    color: var(--input-placeholder);
}

.btn {
    background-color: var(--btn-bg);
    color: var(--btn-text);
}

.btn .arrow {
    color: var(--btn-text);
}

.url::after {
    background: var(--droplet-color);
}

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

.clear:hover {
    background: var(--clear-hover-bg);
    color: var(--clear-hover-color);
}

.footer {
    color: var(--footer-text);
    text-shadow: var(--footer-text-shadow) 0.1em 0.1em 0.3em;
}