:root {
    --bg-light: #FFFFFF;
    --surface-light: #F9FAFB;
    --primary-light: #7C3AED;
    --primary-light-hover: #6D28D9;
    --secondary-light: #8B5CF6;
    --text-light: #1F2937;
    --accent-light: #EC4899;
    --border-light: #E5E7EB;

    --bg-dark: #030712;
    --surface-dark: #111827;
    --primary-dark: #A78BFA;
    --primary-dark-hover: #C4B5FD;
    --secondary-dark: #C4B5FD;
    --text-dark: #E5E7EB;
    --accent-dark: #F472B6;
    --border-dark: #1F2937;

    --bg: var(--bg-light);
    --surface: var(--surface-light);
    --primary: var(--primary-light);
    --primary-hover: var(--primary-light-hover);
    --secondary: var(--secondary-light);
    --text: var(--text-light);
    --accent: var(--accent-light);
    --border: var(--border-light);
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: var(--surface-dark);
        --surface: var(--surface-dark);
        --primary: var(--primary-dark);
        --primary-hover: var(--primary-dark-hover);
        --secondary: var(--secondary-dark);
        --text: var(--text-dark);
        --accent: var(--accent-dark);
        --border: var(--border-dark);
    }
}

/* Used for opacity */
:root {
    --primary-rgb: 124, 58, 237;        /* Light: #7C3AED */
    --secondary-rgb: 139, 92, 246;       /* Light: #8B5CF6 */
    --accent-rgb: 236, 72, 153;          /* Light: #EC4899 */
    --text-rgb: 31, 41, 55;              /* Light: #1F2937 */
}

@media (prefers-color-scheme: dark) {
    :root {
        --primary-rgb: 167, 139, 250;      /* Dark: #A78BFA */
        --secondary-rgb: 196, 181, 253;    /* Dark: #C4B5FD */
        --accent-rgb: 244, 114, 182;       /* Dark: #F472B6 */
        --text-rgb: 229, 231, 235;         /* Dark: #E5E7EB */
    }
}