:root {
    /* Colors */
    --neutral-10: #110623;
    --neutral-20: #201236;
    --neutral-30: #302442;
    --neutral-40: #50495A;
    --neutral-50: #847E8B;
    --neutral-60: #9D99A3;
    --neutral-70: #C6C4CA;
    --neutral-80: #E5E3E8;
    --neutral-90: #EFEEF1;
    --neutral-100: #FAF9FA;

    --primary-10: #AD2F79;
    --primary-20: #CF62A2;
    --primary-30: #EFABD3;
    --primary-40: #FBEAF4;

    --secondary-10: #71307B;
    --secondary-20: #AF68BA;
    --secondary-30: #E5B4EC;
    --secondary-40: #AF68BA;

    --tertiary-10: #5A55C8;
    --tertiary-20: #7874DF;
    --tertiary-30: #BBB8F4;
    --tertiary-40: #EAE9FC;

    --success-10: #0E7D63;
    --success-20: #42CF9C;
    --success-30: #ABE8D6;

    --error-10: #C70C16;
    --error-20: #E84850;
    --error-30: #FF9A9F;

    --disclaimer-10: #0F709A;
    --disclaimer-20: #21A1D8;
    --disclaimer-30: #82D9FF;

    --header-height: 60px;


    /* Font size Desktop  */
    --title-1-large-size: calc(50px + 0.3vw);
    --title-1-size: calc(45px + 0.2vw); /*  48px on 1280 width screen */
    --title-2-size:calc( 35px + 0.2vw);
    --title-3-size: calc(25px + 0.2vw); /* 28px on 1280 width screen */
    --headline-size: 20px;
    --subtitle-size: calc(17px + 0.2vw); /* 28px on 1280 width screen */
    --callout: 18px;
    --body-size: 16px;
    --caption-1-size: 14px;
    --caption-2-size: 12px;

     /* Font size Moblile  */
    --title-1-mobile-size: 34px;
    --title-2-mobile-size: 25px;
    --title-3-mobile-size: 22px; 
    --headline-mobile-size: 18px;
    --subtitle-mobile-size: 14px;
    --callout-mobile: 16px;
    --body-size-mobile: 14px;
    --caption-1-mobile-size: 12px;
    --caption-2-mobile-size: 10px;


    /* Spacing */
    --spacing-left: calc(28px + 0.5vw); /* 32px on 1280 width screen*/

    /* Spacing Moble*/

     --spacing-left-mobile: 16px; 


    /* Theme */
    --background-color-light: #F5F5F5;
    --background-color-dark: #0B021A;
 /*   --background-color-dark-gradient: linear-gradient(180deg, #30072C 0%, #0B021A 30%, #0B021A 100%);*/
    --background-color-dark-gradient: -webkit-linear-gradient(top, #30072C 0%, #0B021A  300px);

    --background-color-light-gradient:  linear-gradient(180deg, #F9ECFB 0%, #F7F7F8 100%);

    --font-color-light: var(--neutral-10);
    --font-color-dark: var(--neutral-100);

    --background-navbar-light: var(--neutral-100);
    --background-navbar-dark: var(--neutral-30);

    --logo-filter-light: none;
    --logo-filter-dark: brightness(0) invert(1);

    --font-color-menu-light: var(--neutral-30);
    --font-color-menu-dark: var(--neutral-90);
    --font-color-menu-active-light: var(--secondary-10);
    --font-color-menu-active-dark: var(--neutral-100);

    --background-textbox-light: var(--tertiary-40);
    --background-textbox-dark: var(--neutral-30);

    --border-textbox-light: var(--neutral-80);
    --border-textbox-dark: var(--neutral-40);

    --border-secondary-button-light: var(--neutral-30);
    --border-secondary-button-dark: var(--neutral-100);

    --page-indicator-light: var(--secondary-10);
    --page-indicator-dark: var(--neutral-100);

    --page-indicator-border-light: 2px var(--neutral-70) solid;
    --page-indicator-border-dark: 1px var(--neutral-30) solid;

    --badge-duration-background-light: rgba(250, 249, 250, 0.6);
    --badge-duration-background-dark: rgba(32, 18, 54, 0.6);

    --button-badge-background-light: var(--neutral-80);
    --button-badge-background-dark: var(--neutral-20);

    --cover-border-light: 1px solid var(--neutral-90);
    --cover-border-dark: 1px solid var(--neutral-30);

    --button-live-background-light: var(--primary-10);
    --button-live-background-dark: var(--neutral-40);

    --badge-next-program-background-light: var(--neutral-80);
    --badge-next-program-background-dark: var(--neutral-30);

    --badge-next-program-second-background-light: var(--neutral-90);
    --badge-next-program-second-background-dark: var(--neutral-10);

    --badge-next-program-time-background-light: var(--neutral-100);
    --badge-next-program-time-background-dark: #3C3550A3;

    --content-box-background-light: var(--tertiary-40);
    --content-box-background-dark: var(--neutral-10);

     --content-box-background-light: var(--tertiary-40);
    --content-box-background-dark: var(--neutral-10);

    --content-box-border-light: var(--neutral-80);
    --content-box-border-dark: var(--neutral-30);

    --primary-anchor-light: var(--primary-10);
    --primary-anchor-dark: var(--primary-20);

    --modal-background-light: var( --background-color-light-gradient);
    --modal-background-dark: var( --background-color-dark-gradient);

    --error-light: var(--error-10);
    --error-dark: var(--error-30);

}
/* Theme */
:root, html[data-theme='light'] {
    --background-color: var(--background-color-light);
    --background-color-gradient:  var(--background-color-light);
    --font-color: var(--font-color-light);
    --background-navbar: var(--background-navbar-light);
    --logo-filter: var(--logo-filter-light);
    --font-color-menu: var(--font-color-menu-light);
    --background-textbox: var( --background-textbox-light);
    --border-textbox:var(--border-textbox-light);
    --border-secondary-button:var(--border-secondary-button-light); 
    --page-indicator:var(--page-indicator-light);
    --page-indicator-border: var(--page-indicator-border-light);
    --badge-duration-background: var( --badge-duration-background-light);
    --button-badge-background: var( --button-badge-background-light);
    --cover-border: var(--cover-border-light);
    --button-live-background: var(--button-live-background-light);
    --badge-next-program-background: var(--badge-next-program-background-light);
    --badge-next-program-second-background: var(--badge-next-program-second-background-light);
    --badge-next-program-time-background: var(--badge-next-program-time-background-light);
    --font-color-menu-active: var(--font-color-menu-active-light);
    --content-box-background: var(--content-box-background-light);
    --content-box-border: var( --content-box-border-light);
    --text-gradient-rank: linear-gradient(180deg, #BCB9F4 0%, rgba(90, 85, 200, 0.00) 100%, rgba(90, 85, 200, 0.00) 100%);
    --primary-anchor: var(--primary-anchor-light);
    --modal-background: var(--modal-background-light);
    --error: var(--error-light);
}

html[data-theme='dark'] {
    --background-color:  var(--background-color-dark);
    --background-color-gradient: var(--background-color-dark-gradient);
    --font-color: var(--font-color-dark);
    --background-navbar: var(--background-navbar-dark);
    --logo-filter: var(--logo-filter-dark);
    --font-color-menu: var(--font-color-menu-dark);
    --background-textbox: var( --background-textbox-dark);
    --border-textbox: var(--border-textbox-dark);
    --border-secondary-button:var(--border-secondary-button-dark);
    --page-indicator:var(--page-indicator-dark);
    --page-indicator-border: var(--page-indicator-border-dark);
    --badge-duration-background: var(--badge-duration-background-dark);
    --button-badge-background: var(--button-badge-background-dark);
    --cover-border: var(--cover-border-dark);
    --button-live-background: var(--button-live-background-dark);
    --badge-next-program-background: var(--badge-next-program-background-dark);
    --badge-next-program-second-background: var(--badge-next-program-second-background-dark);
    --badge-next-program-time-background: var(--badge-next-program-time-background-dark);
    --font-color-menu-active: var(--font-color-menu-active-dark);
    --content-box-background: var(--content-box-background-dark);
    --content-box-border: var( --primary-anchor-dark);
    --text-gradient-rank: linear-gradient(180deg, #5A55C8 0%, rgba(90, 85, 200, 0.00) 100%, rgba(90, 85, 200, 0.25) 100%);
    --primary-anchor: var(--primary-anchor-dark);
    --modal-background: var( --modal-background-dark);
    --error: var(--error-dark);
}