@import url("/css/fonts.css");

@media (prefers-color-scheme: light) {
    :root {
        --overlay: rgba(255, 255, 255, 0.5);
        --card-bg: rgba(255, 255, 255, 0.8);
        --border-color: #e2e8f0;
        --muted-color: #64748b;
        --header-text: #1f2937;
        --header-muted: #6b7280;
        --text-color: #1e293b;
        --accent-color: #4f46e5;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --overlay: rgba(15, 23, 42, 0.5);
        --card-bg: rgba(30, 41, 59, 0.8);
        --header-text: #f3f4f6;
        --header-muted: #cbd5e1;
        --text-color: #f8fafc;
        --accent-color: #818cf8;
        --border-color: #334155;
        --muted-color: #b9c7da;
    }
}

body {
    font-family: "LXGW WenKai Screen";
    background-image: url('/img/background.webp');
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    -webkit-font-smoothing: antialiased;
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--overlay);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    z-index: -1;
}

.loading {
    background-color: var(--card-bg);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    border-radius: 0.8rem;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--border-color);
    transition: transform 0.2s, box-shadow 0.2s;
}

.loading:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.description {
    color: var(--header-text);
}

.subtitle {
    color: var(--header-muted);
}

.url-text, .countdown-text {
    color: var(--text-color);
}

.jump-url {
    color: var(--accent-color);
}

.copy-btn {
    border-color: var(--border-color);
    color: var(--muted-color);
}