:root {
    --color-primary: #5e208f;

    /* Primary Colors */
    --color-primary-400: #c084fc;
    --color-primary-500: #a855f7;
    --color-primary-600: #9333ea;

    /* Dark Theme Colors */
    --color-dark-600: #475569;
    --color-dark-700: #334155;
    --color-dark-800: #1e293b;
    --color-dark-900: #0f172a;

    /* Semantic Variables */
    --bg-body: var(--color-dark-900);
    --bg-card: var(--color-dark-800);
    --bg-glass: rgba(30, 41, 59, 0.7);
    --border-color: rgba(255, 255, 255, 0.1);
    --border-glass: rgba(255, 255, 255, 0.05);

    /* Text Colors */
    --text-primary: #f3f4f6;
    /* gray-100 */
    --text-secondary: #9ca3af;
    /* gray-400 */
    --text-muted: #6b7280;
    /* gray-500 */
}


.bg-site {
    background-color: var(--color-primary);
}