:root {
    --primary-color: #2563EB;
    --light-bg: #FFFFFF;
    --light-surface: #FAFAFA;
    --light-text: #1F2937;
    --light-border: #E5E7EB;
    --dark-bg: #121212;
    --dark-surface: #1E1E1E;
    --dark-text: #F9FAFB;
    --dark-border: #374151;
}

@media (prefers-color-scheme: light) {
    body {
        background-color: var(--light-bg);
        color: var(--light-text);
    }
    .surface {
        background-color: var(--light-surface);
        border: 1px solid var(--light-border);
    }
    .text-color { color: var(--light-text); }
    .border-color { border-color: var(--light-border); }
}

@media (prefers-color-scheme: dark) {
    body {
        background-color: var(--dark-bg);
        color: var(--dark-text);
    }
    .surface {
        background-color: var(--dark-surface);
        border: 1px solid var(--dark-border);
    }
    .text-color { color: var(--dark-text); }
    .border-color { border-color: var(--dark-border); }
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

#drop-zone {
    border: 2px dashed var(--primary-color);
    border-radius: 0.5rem;
    padding: 3rem;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
}

#drop-zone.drag-over {
    background-color: rgba(37, 99, 235, 0.1);
}

.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}