:root {
    /* System Colors */
    --color-primary: #6E3FE0;
    --color-secondary: #A59CCF;
    --color-text: #D2D5E1;
    --color-accent: #3C1A8F;
    
    /* Custom Colors */
    --color-bg-color: #07040C;
    --color-bg-light: #1D142B;
    --color-section-divider: #2A2038;
    --color-cool-grey: #675E82;
    --color-card-surface: #120D1A;
    --color-muted-text: #8F86A8;
    --color-full-transparency: #FFFFFF00;
    --color-semi-transparent-purple: #5829CB94;
    --color-almost-transparent-purple: #5029CB30;
    --color-popup-overlay: #0E172DCC;
    --color-highlight-glow: #6E3FE0AA;
    --color-text-light: #F2ECFF;
    --color-bg-colour-2: #121017;

    /* == System Typography == */
    
    /* Primary (H1) */
    --typo-primary-font-family: "Roboto Slab", sans-serif;
    --typo-primary-font-weight: 700;
    --typo-primary-font-size: 50px;
    --typo-primary-line-height: 1.1em;
    --typo-primary-letter-spacing: -0.5px;

    /* Secondary (H2) */
    --typo-secondary-font-family: "Roboto Flex", sans-serif;
    --typo-secondary-font-weight: 600;
    --typo-secondary-font-size: 28px;
    --typo-secondary-line-height: 1.3em;
    --typo-secondary-letter-spacing: -0.25px;

    /* Text (Body) */
    --typo-text-font-family: "Roboto", sans-serif;
    --typo-text-font-weight: 400;
    --typo-text-font-size: 18px;
    --typo-text-line-height: 1.6em;
    --typo-text-letter-spacing: 0px;

    /* Accent */
    --typo-accent-font-family: "Roboto Condensed", sans-serif;
    --typo-accent-font-weight: 500;
    --typo-accent-font-size: 16px;
    --typo-accent-letter-spacing: 0.5px;
    --typo-accent-text-transform: uppercase;


    /* == Custom Typography == */

    /* Hero Main Title */
    --typo-custom-hero-font-family: "Roboto Slab", sans-serif;
    --typo-custom-hero-font-size: 72px;
    --typo-custom-hero-font-weight: 700;
    --typo-custom-hero-line-height: 1.05em;

    /* Call To Action Title */
    --typo-custom-cta-font-family: "Roboto Flex", sans-serif;
    --typo-custom-cta-font-size: 28px;
    --typo-custom-cta-font-weight: 600;
    --typo-custom-cta-line-height: 1.2em;
    --typo-custom-cta-text-transform: uppercase;

    /* Small Title Capitalize */
    --typo-custom-small-title-cap-font-family: "Roboto Condensed", sans-serif;
    --typo-custom-small-title-cap-font-size: 20px;
    --typo-custom-small-title-cap-font-weight: 500;
    --typo-custom-small-title-cap-line-height: 1.3em;
    --typo-custom-small-title-cap-text-transform: uppercase;

    /* Menu Links/Name and Title */
    --typo-custom-menu-font-family: "Roboto Condensed", sans-serif;
    --typo-custom-menu-font-size: 16px;
    --typo-custom-menu-font-weight: 500;
    --typo-custom-menu-line-height: 1.2em;
    --typo-custom-menu-text-transform: uppercase;

    /* Header Small Text */
    --typo-custom-header-small-font-family: "Roboto Mono", monospace;
    --typo-custom-header-small-font-size: 12px;
    --typo-custom-header-small-font-weight: 400;
    --typo-custom-header-small-text-transform: capitalize;

    /* Small Title Normal */
    --typo-custom-small-title-norm-font-family: "Roboto", sans-serif;
    --typo-custom-small-title-norm-font-size: 18px;
    --typo-custom-small-title-norm-font-weight: 300;
    --typo-custom-small-title-norm-line-height: 2.2em;

    /* Footer Copyright Text */
    --typo-custom-footer-copy-font-family: "Roboto Mono", monospace;
    --typo-custom-footer-copy-font-size: 14px;
    --typo-custom-footer-copy-font-weight: 400;
    --typo-custom-footer-copy-line-height: 1.4em;
    --typo-custom-footer-copy-letter-spacing: 0px;

}

/* Color Utility Classes */
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-accent { color: var(--color-accent); }
.text-light { color: var(--color-text-light); }
.text-muted { color: var(--color-muted-text); }

/* Background Utility Classes */
.bg-primary { background-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-accent { background-color: var(--color-accent); }
.bg-color-main { background-color: var(--color-bg-color); }
.bg-color-light { background-color: var(--color-bg-light); }
.bg-color-2 { background-color: var(--color-bg-colour-2); }
.bg-card-surface { background-color: var(--color-card-surface); }

/* Border Utility Classes */
.border-divider { border-color: var(--color-section-divider); }


/* Typography Utility Classes */

.typo-primary {
    font-family: var(--typo-primary-font-family);
    font-weight: var(--typo-primary-font-weight);
    font-size: var(--typo-primary-font-size);
    line-height: var(--typo-primary-line-height);
    letter-spacing: var(--typo-primary-letter-spacing);
}

.typo-secondary {
    font-family: var(--typo-secondary-font-family);
    font-weight: var(--typo-secondary-font-weight);
    font-size: var(--typo-secondary-font-size);
    line-height: var(--typo-secondary-line-height);
    letter-spacing: var(--typo-secondary-letter-spacing);
}

.typo-text {
    font-family: var(--typo-text-font-family);
    font-weight: var(--typo-text-font-weight);
    font-size: var(--typo-text-font-size);
    line-height: var(--typo-text-line-height);
    letter-spacing: var(--typo-text-letter-spacing);
}

.typo-accent {
    font-family: var(--typo-accent-font-family);
    font-weight: var(--typo-accent-font-weight);
    font-size: var(--typo-accent-font-size);
    letter-spacing: var(--typo-accent-letter-spacing);
    text-transform: var(--typo-accent-text-transform);
}

.typo-hero {
    font-family: var(--typo-custom-hero-font-family);
    font-weight: var(--typo-custom-hero-font-weight);
    font-size: var(--typo-custom-hero-font-size);
    line-height: var(--typo-custom-hero-line-height);
}

.typo-cta {
    font-family: var(--typo-custom-cta-font-family);
    font-weight: var(--typo-custom-cta-font-weight);
    font-size: var(--typo-custom-cta-font-size);
    line-height: var(--typo-custom-cta-line-height);
    text-transform: var(--typo-custom-cta-text-transform);
}

.typo-small-cap {
    font-family: var(--typo-custom-small-title-cap-font-family);
    font-weight: var(--typo-custom-small-title-cap-font-weight);
    font-size: var(--typo-custom-small-title-cap-font-size);
    line-height: var(--typo-custom-small-title-cap-line-height);
    text-transform: var(--typo-custom-small-title-cap-text-transform);
}

.typo-menu {
    font-family: var(--typo-custom-menu-font-family);
    font-weight: var(--typo-custom-menu-font-weight);
    font-size: var(--typo-custom-menu-font-size);
    line-height: var(--typo-custom-menu-line-height);
    text-transform: var(--typo-custom-menu-text-transform);
}

.typo-header-small {
    font-family: var(--typo-custom-header-small-font-family);
    font-weight: var(--typo-custom-header-small-font-weight);
    font-size: var(--typo-custom-header-small-font-size);
    text-transform: var(--typo-custom-header-small-text-transform);
}

.typo-small-norm {
    font-family: var(--typo-custom-small-title-norm-font-family);
    font-weight: var(--typo-custom-small-title-norm-font-weight);
    font-size: var(--typo-custom-small-title-norm-font-size);
    line-height: var(--typo-custom-small-title-norm-line-height);
}

.typo-footer-copy {
    font-family: var(--typo-custom-footer-copy-font-family);
    font-weight: var(--typo-custom-footer-copy-font-weight);
    font-size: var(--typo-custom-footer-copy-font-size);
    line-height: var(--typo-custom-footer-copy-line-height);
    letter-spacing: var(--typo-custom-footer-copy-letter-spacing);
}