/* Web fonts removed for Tor Browser compatibility - using system font stacks instead */

/* CSS Variables */
:root {
    /* Colors */
    --color-bg: #1D1D1E;
    --color-primary: #A62288;
    --color-text-primary: #FFFFFF;
    --color-text-secondary: #CCCCCC;
    --color-text-tertiary: #626265;
    --color-border: #434344;
    --color-button-text: #E5E7EB;
    
    /* Gradients */
    --gradient-primary: linear-gradient(180deg, rgba(166, 34, 136, 0.5) 0%, rgba(53, 11, 43, 0.5) 100%);
    --gradient-secondary: linear-gradient(180deg, #16BA5C 0%, #063C1E 100%);
    --gradient-button: linear-gradient(180deg, #A62288 0%, #400D34 100%);
    
    /* Backgrounds with opacity */
    --bg-upload: rgba(56, 56, 56, 0.2);
    --bg-button: rgba(166, 34, 136, 0.1);
    
    /* Border colors with opacity */
    --border-upload: rgba(67, 67, 68, 0.6);
    --border-dropdown: rgba(56, 56, 56, 0.4);
    
    /* Font families - Using system fonts for Tor Browser compatibility */
    --font-primary: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'Monaco', 'Cascadia Code', 'Courier New', Courier, monospace;
    
    /* Common sizes */
    --border-radius-sm: 5px;
    --border-radius-md: 8px;
    --border-radius-lg: 20px;
}

/* Utility Classes */
.text-gradient-primary {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.btn {
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    border-radius: var(--border-radius-sm) 0 0 0;
    cursor: pointer;
}

.btn-primary {
    background: var(--gradient-primary);
    border: 0.8px solid var(--color-primary);
    color: var(--color-text-primary);
}

.btn-secondary {
    background: var(--bg-button);
    border: 0.8px solid var(--color-primary);
    color: var(--color-button-text);
}

/* Would you like me to continue with the component-specific styles using these variables? */