:root {
    /* Colors */
    --tmc-primary-color: #FFC31F;
    --tmc-green-color: #CDE12A;
    --tmc-blue-color: #8BC2D6;
    --tmc-yellow-color: #FAE100;
    --tmc-red-color: #FF6755;
    --tmc-black-color: #000;
    --active-color: var(--tmc-primary-color);

    --tmc-primary-color-light: #FFF3D2;

    --nr-color: #0091FF;
    --classic-color: #00BBFF;
    --tv-color: #8886FC;
    --audio-color: #03DAC5;
    --pod-color: #87C4AE;

    --nr-color-light: #CCE9FF;
    --classic-color-light: #CCF1FF;
    --tv-color-light: #E7E7FE ;
    --audio-color-light: #CDF8F3 ;
    --pod-color-light: #E7F3EF;

    --light-grey: #A8A8A8;
    --medium-grey: #6D6D6D;
    --dark-grey: #686868;

    /* Font Sizes */
    --text-xxs: 10px;
    --text-xs: 12px;
    --text-sm: 14px;
    --text-base: 16px;
    --text-lg: 18px;
    --text-xl: 20px;
    --text-2xl: 24px;
    --text-3xl: 28px;
    --text-4xl: 35px;
    --text-6xl: 60px;
    --text-9xl: 128px;

    /* Font Weights */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
}


/****** Utility Classes ******/
/* BG Colors */
.bg-tmc-primary { background-color: var(--tmc-primary-color); }
.bg-tmc-primary-light { background-color: var(--tmc-primary-color-light); }

.bg-nr { background-color: var(--nr-color); }
.bg-classic { background-color: var(--classic-color); }
.bg-tv { background-color: var(--tv-color); }
.bg-audio { background-color: var(--audio-color); }
.bg-pod { background-color: var(--pod-color); }

.bg-nr-light { background-color: var(--nr-color-light); }
.bg-classic-light { background-color: var(--classic-color-light); }
.bg-tv-light { background-color: var(--tv-color-light); }
.bg-audio-light { background-color: var(--audio-color-light); }
.bg-pod-light { background-color: var(--pod-color-light); }

/* Font Sizes */
.text-xxs { font-size: var(--text-xxs); }
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }
.text-4xl { font-size: var(--text-4xl); }
.text-6xl { font-size: var(--text-6xl); }
.text-9xl { font-size: var(--text-9xl); }

/* Font Weights */
.font-weight-light { font-weight: var(--font-weight-light); }
.font-weight-normal { font-weight: var(--font-weight-normal); }
.font-weight-medium { font-weight: var(--font-weight-medium); }
.font-weight-semibold { font-weight: var(--font-weight-semibold); }
.font-weight-bold { font-weight: var(--font-weight-bold); }

/* Borders */
.e-border { border: 1px solid; }
.e-border-2 { border-width: 2px; }
.e-border-3 { border-width: 3px; }
.e-border-4 { border-width: 4px; }
.border-solid { border-style: solid; }
.border-dashed { border-style: dashed; }
.full-rounded { border-radius: 9999px; }

/* Border Colors */
.border-primary { border-color: var(--tmc-primary-color); }
.border-green { border-color: var(--tmc-green-color); }
.border-blue { border-color: var(--tmc-blue-color); }
.border-yellow { border-color: var(--tmc-yellow-color); }
.border-red { border-color: var(--tmc-red-color); }

/* Width */
.w-10 { width: 10%; }
.w-20 { width: 20%; }
.w-30 { width: 30%; }
.w-40 { width: 40%; }
.w-50 { width: 50%; }
.w-60 { width: 60%; }
.w-70 { width: 70%; }
.w-80 { width: 80%; }
.w-90 { width: 90%; }
.w-100 { width: 100%; }

/* Flex Width */
.flex-1 {flex: 1;}
.flex-2 {flex: 2;}
.flex-3 {flex: 3;}

/* Colors */
.text-light-grey { color: var(--light-grey); }
.text-medium-grey { color: var(--medium-grey); }
.text-dark-grey { color: var(--dark-grey); }
.text-tmc-red {color: var(--tmc-red-color);}