/**************************************************/

:root {
    /* Typography */
    --font-family-primary: 'Space Grotesk', sans-serif;
    --font-family-header: 'Syncopate', sans-serif;
    --font-family-mono: 'Rajdhani', monospace;
    --root-font-letter-spacing: 0px;
    --root-font-size: 16px;

    /* TwinX Core Colors */
    --void: 240 6% 9%;
    --void-raw: 240, 6%, 9%;
    --deep: 240 9% 4%;
    --deep-raw: 240, 9%, 4%;
    --gold: 44 100% 50%;
    --gold-raw: 44, 100%, 50%;
    --neon-blue: 192 100% 50%;
    --neon-blue-raw: 192, 100%, 50%;
    --glass: 0 0% 100%;
    --glass-raw: 0, 0%, 100%;

    /* Basic Colors (TwinX-adjusted) */
    --action: 44 100% 50%;
    --action-raw: 44, 100%, 50%;
    --black: 240 9% 4%;
    --black-raw: 240, 9%, 4%;
    --danger: 6.05 79.85% 51.27%;
    --danger-raw: 6.05, 79.85%, 51.27%;
    --info: 192 100% 50%;
    --info-raw: 192, 100%, 50%;
    --success: 108.00 65.51% 47.07%;
    --success-raw: 108.00, 65.51%, 47.07%;
    --warning: 42.24 68.52% 42.69%;
    --warning-raw: 42.24, 68.52%, 42.69%;

    /* Main Tones and Shades (TwinX-adjusted to void/deep) */
    --main-dark: 240 6% 9%;
    --main-dark-raw: 240, 6%, 9%;
    --main-light: 240 5% 92%;
    --main-light-raw: 240, 5%, 92%;

    /* Light Tones and Shades (TwinX-adjusted) */
    --light-shades: 240 5% 95%;
    --light-shades-raw: 240, 5%, 95%;
    --light-shades-2: 240 5% 88%;
    --light-shades-2-raw: 240, 5%, 88%;
    --light-shades-3: 240 5% 82%;
    --light-shades-3-raw: 240, 5%, 82%;

    /* Dark Tones and Shades (TwinX-adjusted) */
    --dark-shades: 240 6% 12%;
    --dark-shades-raw: 240, 6%, 12%;
    --dark-shades-2: 240 7% 18%;
    --dark-shades-2-raw: 240, 7%, 18%;
    --dark-shades-3: 240 9% 6%;
    --dark-shades-3-raw: 240, 9%, 6%;

    /* Complementary Colors (TwinX-adjusted) */
    --complement-1: 265 68.20% 42.30%;
    --complement-1-raw: 265, 68.20%, 42.30%;
    --complement-2: 355 71.30% 51.70%;
    --complement-2-raw: 355, 71.30%, 51.70%;
    --complement-3: 85 65.10% 44.65%;
    --complement-3-raw: 85, 65.10%, 44.65%;
    --complement-4: 192 80% 55%;
    --complement-4-raw: 192, 80%, 55%;

    /* Brand Colors (TwinX Gold) */
    --brand-color: 44 100% 50%;
    --brand-color-raw: 44, 100%, 50%;
    --brand-color-darker: 42 100% 38%;
    --brand-color-darker-raw: 42, 100%, 38%;
    --brand-color-lighter: 46 100% 62%;
    --brand-color-lighter-raw: 46, 100%, 62%;
}