:root {
    --color-blue: #091DF6;     /* Main Blue 50 */
    --color-greyblue: #8A8FA8; /* Main Greyblue 60 */
    --color-mono-black: #262626;    /* Main Black 15 */
    --color-purple: #5533FF;   /* Main Purple 60 */
    --color-mono-white: #FFFFFF;

    --color-blue-20: #040B62;
    --color-blue-30: #051194;
    --color-blue-40: #0717C5;
    --color-blue-45: #081ADD;
    --color-blue-50: #091DF6;
    --color-blue-55: #2233F7;
    --color-blue-60: #3A4AF8;
    --color-blue-70: #6B77FA;
    --color-blue-80: #9DA4FB;
    --color-blue-90: #CED2FD;
    --color-blue-95: #E6E8FE;
    --color-blue-97: #F0F1FE;

    --color-greyblue-30: #414558;
    --color-greyblue-40: #575C75;
    --color-greyblue-50: #6C7393;
    --color-greyblue-60: #8A8FA8;
    --color-greyblue-70: #A7ABBE;
    --color-greyblue-80: #C4C7D4;
    --color-greyblue-85: #D3D5DE;
    --color-greyblue-90: #E2E3E9;
    --color-greyblue-95: #F0F1F4;
    --color-greyblue-97: #F6F7F8;

    --color-mono-0:  #000000;
    --color-mono-15: #262626;
    --color-mono-50: #808080;
    --color-mono-60: #999999;
    --color-mono-70: #B2B2B2;
    --color-mono-80: #CCCCCC;
    --color-mono-85: #D9D9D9;
    --color-mono-90: #E5E5E5;
    --color-mono-95: #F2F2F2;
    --color-mono-97: #FAFAFA;

    --color-purple-20: #110066;
    --color-purple-30: #1A0099;
    --color-purple-40: #2200CC;
    --color-purple-50: #2B00FF;
    --color-purple-60: #5533FF;
    --color-purple-65: #6A4DFF;
    --color-purple-75: #9580FF;
    --color-purple-85: #BFB2FF;
    --color-purple-90: #D4CCFF;
    --color-purple-95: #EAE5FF;
    --color-purple-97: #F2F0FF;
    --color-purple-98: #F6F5FF;

    --color-dark-green: #46931F; /* Dark Green 35 */
    --color-green: #75BF40;      /* Green 50 */
    --color-yellow: #ECB613;     /* Yellow 50 */
    --color-red: #CC3333;        /* Red 50 */

    --color-dark-green-30: #3C7E1B;
    --color-dark-green-35: #46931F;
    --color-dark-green-40: #50A824;
    --color-dark-green-45: #5ABD28;
    --color-dark-green-55: #73D742;
    --color-dark-green-60: #83DB57;
    --color-dark-green-70: #A2E481;
    --color-dark-green-80: #C1EDAB;
    --color-dark-green-85: #D0F2C0;
    --color-dark-green-90: #E0F6D5;

    --color-green-45: #69AC39;
    --color-green-50: #75BF40;
    --color-green-55: #83C653;
    --color-green-60: #91CC66;
    --color-green-70: #ACD98C;
    --color-green-80: #C8E5B3;
    --color-green-90: #E3F2D9;
    --color-green-95: #F1F9EC;
    --color-green-97: #F7FBF4;

    --color-yellow-45: #D4A411;
    --color-yellow-50: #ECB613;
    --color-yellow-55: #EEBD2B;
    --color-yellow-60: #F0C442;
    --color-yellow-70: #F4D371;
    --color-yellow-80: #F7E2A1;
    --color-yellow-90: #FBF0D0;
    --color-yellow-95: #FDF8E7;
    --color-yellow-97: #FEFBF1;

    --color-red-45: #B82E2E;
    --color-red-50: #CC3333;
    --color-red-55: #D14747;
    --color-red-60: #D65C5C;
    --color-red-70: #E08585;
    --color-red-80: #EBADAD;
    --color-red-90: #F5D6D6;
    --color-red-95: #FAEBEB;
    --color-red-97: #FDF7F7;

    --fg-placeholder: var(--color-mono-60);
    --fg-text: var(--color-mono-15);
    --fg-text-action: var(--color-purple-60);
    --fg-text-action-hover: var(--color-purple-55); 
    --fg-text-secondary: var(--color-mono-50); 
    --fg-text-tertiary: var(--color-mono-70); 
    --fg-text-disabled: var(--color-mono-70); 
    --fg-text-on-action: var(--color-mono-white); 
    --fg-text-on-action-secondary: var(--color-greyblue-50); 
    --fg-error: var(--color-red-55); 
    --fg-success: var(--color-dark-green-45); 
    --fg-warning: var(--color-yellow-55); 

    --bg-page: var(--color-mono-white);
    --bg-primary: var(--color-mono-white);
    --bg-subtle: var(--color-mono-97);
    --bg-action: var(--color-purple-60);
    --bg-action-hover: var(--color-purple-55);
    --bg-action-secondary: var(--color-greyblue-95);
    --bg-action-secondary-hover: var(--color-purple-97);
    --bg-action-subtle: var(--color-mono-white);
    --bg-action-subtle-hover: var(--color-greyblue-97);
    --bg-disabled: var(--color-mono-95);
    --bg-success: var(--color-dark-green-90);
    --bg-error: var(--color-red-95);
    --bg-warning: var(--color-yellow-90);

    --color-branding-loud: #401AFF; 
    --color-branding-dark: var(--color-purple-60);   /* Main Purple 60 */
    --color-branding-mid: var(--color-purple-95);  /* Main Purple 95 */
    --color-branding-light: var(--color-purple-98); /* Main Purple 98 */
    --color-branding-links: var(--color-purple-60);

    --color-logomark: var(--color-purple-60);

    /* Some particular elements are different in light and dark modes */
    /* Active Secondary Buttons */
    --secondary-active-background: var(--color-purple-95); 
    --secondary-active-bordercolor: var(--color-purple);
    --secondary-active-color: var(--color-purple); 

    /* Filmlist Filter */
    --filmlist-filter-background: var(--color-purple-98);
    --filmlist-filter-expandlink-hover: var(--color-purple-95);

    /* Admin Functions */
    --adminbox-background: #FFE5B2;
    --adminbox-border: #FFCC99;
    --adminbox-color: #000;
    --adminbox-link: #663300;
}