/* Base styles - Common to all screen sizes */
:root {
    --primary-color: #6b65da;
    --text-color: #fff;
    --background-dark: #000;
    --Background-primary: #000;

    /* Spacing */
    --px8: 8px;
    --px16: 16px;
    --px24: 24px;
    --px32: 32px;
    --px64: 64px;
    --px96: 96px;

    /* Colors */
    --Text-link: #c4c9ff;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-primary);
    -webkit-font-smoothing: antialiased;
    background-color: var(--Background-primary);
    color: var(--Text-whitePrimary);
}

/* Responsive Utility Classes */
/* Hidden by default on all screen sizes */
.mobile-only {
    display: none !important;
}

.desktop-only {
    display: block;
}

/* For inline elements */
span.desktop-only {
    display: inline;
}

.tablet-only {
    display: none !important;
}

/* These will be overridden in respective responsive CSS files */