:root {
    /***  New Variables ***/
    /*** COLORS ***/

    --brand-primary: #0C0C4F;

    --border-badge: #CCCCCC;
    --border-button-fill-invert: transparent;
    --border--button-fill-invert-hover: #0C0C4F;
    --border-button-outline: #0C0C4F;
    --border-button-outline-hover: #5C94FF;
    --border-button-disabled: #0C0C4F;
    --border-button-show-more: #E9E8EA;
    --border-button-show-more-hover: #5C94FF;
    --border-button-show-more-focused: #EFEFEF;
    --border-button-content-type-filter: #23192D1A;
    --border-button-content-type-filter-hover: #5C94FF;
    --border-button-content-type-filter-active: #0C0C4F;
    --border-button-content-type-filter-active-hover: #0C0C4F;
    --border-card: #EFEFEF;
    --border-divider: #EFEFEF;
    --border-input: #E2E8F0;
    --border-input-focused: #3182CE;
    --border-modal: #EAEFEE;
    --border-card-roadmap: #CCCCCC;
    --border-tab-active: #E97880;
    --border-open-filters-button: #CCCCCC;
    --border-open-filters-button-filled: #0C0C4F;
    --border-open-filters-button-v2: #0C0C4F;
    --border-filter-button-v2-active: #E97880;
    --border-table: #3636363d;
    --border-pack: #00000005;

    --surface-background: #FBFBFB;
    --surface-background-darker: #F6F6F6;
    --surface-latest-post: #EDF2F7FF;
    --surface-badge-blue: #DBEAFE;
    --surface-badge-general: #F3F4F6;
    --surface-badge-green: #D1FAE5;
    --surface-badge-pink: #FCE7F3;
    --surface-badge-purple: #EDE9FE;
    --surface-badge-yellow: #FEF3C7;
    --surface-badge-related: #EDF2F7FF;
    --surface-button-copy: #CCCCCC;
    --surface-button-fill-default: #0C0C4F;

    --surface-button-fill-hover: #303093;
    --surface-button-fill-pressed: #4A4AB5;
    --surface-button-fill-invert: #0C0C4F;
    --surface--button-fill-invert-hover: #FFFFFF;

    --surface-button-modal-close: #0000000F;
    --surface-button-outline-default: transparent;

    --surface-button-outline-hover: #2B1E3714;
    --surface-button-outline-pressed: #23192D1A;

    --surface-button-show-more-focused: #EFEFEF;
    --surface-button-nav: transparent;
    --surface-card: #FFFFFF;
    --surface-card-2: #FFFFFF;
    --surface-card-d: #FFFFFF;
    --surface-icon-sn: #1A1523;

    --surface-icon: #000000;
    --surface-input: #FFFFFF;
    --surface-modal: #FBFBFC;
    --surface-filter-button: #F6F6F6;
    --surface-filter-button-hover: #F1F1FF;
    --surface-filter-button-active: #6B7280;
    --surface-filter-button-active-hover: #858585;
    --surface-open-filters-button-filled: #0C0C4F;
    --surface-open-filters-button-v2: #FBFBFB;
    --surface-button-content-type-filter: #4826480F;
    --surface-button-content-type-filter-hover: transparent;
    --surface-button-content-type-filter-active: #0C0C4F;
    --surface-button-content-type-filter-active-hover: #131365;
    --surface-slider-dot: #718096;
    --surface-slider-dot-active: #0C0C4F;
    --surface-pack: #E8E8E8;
    --surface-tag: #F1F1FE;

    --text-badge-blue: #1E40AF;
    --text-badge-general: #1F2937;
    --text-badge-green: #065F46;
    --text-badge-pink: #9D174D;
    --text-badge-purple: #5B21B6;
    --text-badge-yellow: #92400E;
    --text-button-copy: #363636;
    --text-label-2: #082817;
    --text-main-menu: #363636;
    --text-menu-focus: #FFFFFF;
    --bg-menu-inner: #FBFBFB;
    --bg-menu-button: #0C0C4F;
    --icon-color: #1B1B1BFF;

    --text-button-fill: #FFFFFF;

    --text-button-fill-invert: #FFFFFF;
    --text-button-fill-invert-hover: #0C0C4F;
    --text-button-gradient: #FFFFFF;
    --text-button-modal-close: #363636;
    --text-button-outline: #0C0C4F;
    --text-button-outline-hover: #5C94FF;
    --text-button-show-more: #908E96;
    --text-button-show-more-hover: #5C94FF;
    --text-button-show-more-focused: #6B7280;
    --text-label: #2D3748;
    --text-link: #1061FF;
    --text-primary: #0C0C4F;
    --text-primary-inverted: #FFFFFF;
    --text-required: #E53E3E;
    --text-secondary: #6B7280;
    --text-secondary-hover: #0C0C4F;
    --text-subtitle: #313131;
    --text-video-controls: #CCCCCC;
    --text-video-controls-hover: #FFFFFF;
    --text-btn-filter: #6A6A6A;
    --text-tab: #858585;
    --text-tab-active: #0C0C4F;
    --text-filter-button: #6A6A6A;
    --text-filter-button-hover: #0C0C4F;
    --text-filter-button-active: #FFFFFF;
    --text-filter-button-active-hover: #E5E5F3;
    --text-filter-button-v2: #858585;
    --text-filter-button-v2-hover: #858585;
    --text-filter-button-v2-active: #0C0C4F;
    --text-open-filters-button: #363636;
    --text-open-filters-button-filled: #FFFFFF;
    --text-open-filters-button-v2: #0C0C4F;
    --text-date-related: #4A5568;
    --text-button-content-type-filter: #0C0C4F;
    --text-button-content-type-filter-hover: #5C94FF;
    --text-button-content-type-active-filter: #FFFFFF;
    --text-button-content-type-filter-active-hover: #FFFFFF;
    --text-more-link: #363636;
    --text-slider-nav: #0C0C4F;
    --text-nav-arrow: #000000;
    --bg-banner: #0C0C4F;
    --icon-grant: #1A1523;
    --wallets-badge : #2F3093;

    /*** GRADIENTS, SHADOWS ***/
    --shadow-button-pressed: #1111113D;
    --border-button-outline-hover-a: #EC796B;
    --border-button-outline-hover-b: #D672EF;
    --surface-button-gradient-default-a: #171870;
    --surface-button-gradient-default-b: #3928A0;
    --surface-button-gradient-default-c: #A15882;
    --surface-button-gradient-hover-a: #6565B3;
    --surface-button-gradient-hover-b: #7666D8;
    --surface-button-gradient-hover-c: #D586B5;
    --surface-card-img-a: #E9F2F8;
    --surface-card-img-b: #FBF6F1;
    --surface-hp-hero-section: linear-gradient(0.59deg, #FBECF3 0.97%, #F3EBF7 26.24%, #F0F0FB 54.59%, #E6F0FF 99.96%);
    --surface-dapp-hero-section: linear-gradient(258.76deg, #FFDAD6 3.96%, #B6C6FF 254.34%);
    --surface-wallets-hero-section: linear-gradient(258.76deg, #FAE4AB 3.96%, #ECA9FD 254.34%);
    --surface-bridges-onramps-hero-section: linear-gradient(258.76deg, #B4DBFF 3.96%, #A9FDB6 254.34%);
    --surface-block-explorers-hero-section: linear-gradient(258.76deg, #B5F6FF 3.96%, #FDF4A9 254.34%);
    --surface-fullnodes-hero-section: linear-gradient(264.75deg, #F7E9E8 41.74%, #CDCEE7 161.19%);
    --surface-security-and-audits-hero-section: linear-gradient(266.1deg, #C3D6FE 0%, #EFCBFF 97.67%);
    --surface-dev-hub-hero-section: linear-gradient(258.76deg, #FFC8CE 3.96%, #FDFAA9 254.34%);
    --surface-explore-hero-section: linear-gradient(258.76deg, #B5F6FF 3.96%, #FDF4A9 254.34%);
    --surface-roadmap-hero-section: linear-gradient(280.23deg, #EAF7FF 0%, #FAFDFF 100%, #EEFAFF 100%),
    linear-gradient(280.23deg, #EAF7FF 0%, #FAFDFF 100%, #EEFAFF 100%),
    linear-gradient(280.23deg, #DEF7FD 0%, #F4FDFF 100%), #F8F8F8;
    --surface-grant-program-hero-section: linear-gradient(258.76deg, #CDCDE8, #DEFAFF);
    --surface-snips-hero-section: linear-gradient(258.76deg, #B5F6FF 3.96%, #FDF4A9 254.34%);


    --cro-gradient-orange: linear-gradient(258.76deg, #FFEEF0 3.96%, #FFFEF2 254.34%);
    --cro-gradient-green: linear-gradient(261.39deg, #E2F1FF 5.22%, #E4FFE8 165.02%);
    --cro-gradient-yellow: linear-gradient(258.76deg, #FFF7E1 3.96%, #F8DCFF 254.34%);
    --cro-gradient-pink: linear-gradient(258.76deg, #FFEEEC 3.96%, #EDF1FF 254.34%);

    --cro-inner-bg-lines: url("/wp-content/themes/Starknet/assets/img/lines-bg-mobile.png") no-repeat;
    /*--cro-inner-bg-lins-mobile: url("/wp-content/uploads/2024/06/lines-bg-mobile.png");*/
    --cro-bottom-bg-lines: url("/wp-content/themes/Starknet/assets/img/lines-banner-bg.png") no-repeat;
    /*--cro-bottom-bg-lins-mobile: url("/wp-content/uploads/2024/06/lines-bg.png");*/

    /*** SPACING ***/
    --main-container-width: 1344px;
    --padding-2-xl: 32px;
    --padding-3-xl: 40px;
    --padding-4-xl: 80px;
    --padding-5-xl: 120px;
    --padding-6-xl: 140px;
    --padding-base: 4px;
    --padding-lg: 20px;
    --padding-md: 16px;
    --padding-none: 0px;
    --padding-sm: 12px;
    --padding-xl: 24px;
    --padding-xs: 8px;
    --page-gap-large: var(--padding-6-xl);
    --page-gap-medium: var(--padding-4-xl);
    --page-gap-small: var(--padding-2-xl);
    --page-margins: var(--padding-4-xl);
    --radius-base: 4px;
    --radius-lg: 24px;
    --radius-md: 16px;
    --radius-none: 0px;
    --radius-round: 999px;
    --radius-sm: 12px;
    --radius-xs: 8px;

    /*** FONT ***/
    --font-Inter: "Inter", sans-serif;



    --colors-white: #FFF;
    --colors-black: #000;
    --colors-navy: #0C0C4F;

    --colors-gray-50: #F7FAFC;
    --colors-gray-100: #EDF2F7;
    --colors-gray-200: #E2E8F0;
    --colors-gray-300: #CBD5E0;
    --colors-gray-400: #A0AEC0;
    --colors-gray-500: #718096;
    --colors-gray-600: #4A5568;
    --colors-gray-700: #2D3748;
    --colors-gray-800: #1A202C;
    --colors-gray-900: #171923;

    --colors-blackAlpha-600: rgba(0, 0, 0, 0.48);

    --colors-grey-darkText: #363636;
    --colors-grey-morning: #CCCCCC;

    --colors-bg-default: #FBFBFB;

    --colors-card-link: #5C94FF;
    --colors-text-grey: #6B7280;
    --colors-text-heading: var(--colors-gray-800);
    --colors-text-subtitle: #313131;
    --colors-card-br: #EFEFEF;

    --colors-button-navy: var(--colors-navy);
    --colors-tabs-border-active-bg: #E97880;

    --colors-selected-main: #5C94FF;
}

html.starknet-ui-dark {
    /***  New Variables ***/
    /*** COLORS***/
    --border-badge: #5C5C5C;
    --border-button-default: #23192D1E;
    --border-button-disabled: #48485BFF;
    --border-button-fill-invert: #F6F6F9;
    --border--button-fill-invert-hover: #FFFFFF;
    --border-button-outline: #FFFFFFFF;
    --border-button-outline-hover: #AFCAFF;
    --border-button-show-more-hover: #9EBFFF;
    --border-button-show-more-focused: #000000;
    --border-card: #000000;
    --border-divider: #313131FF;
    --border-input: #2D3748;
    --border-input-focused: #63B3ED;
    --border-modal: #363636;
    --border-card-roadmap: #5C5C5C;
    --border-tab-active: #FE9F92;
    --border-open-filters-button: #CCCCCC;
    --border-open-filters-button-filled: #5C95FF;
    --border-open-filters-button-v2: #5C95FF;
    --border-button-content-type-filter: #23192D1A;
    --border-button-content-type-filter-hover: #9EBFFF;
    --border-button-content-type-filter-active: #5C94FF;
    --border-button-content-type-filter-active-hover: #5C94FF;
    --border-table: #cccccc70;
    --border-pack: #FFFFFF1A;

    --surface-accent: #A4A4EAFF;
    --surface-accent-hover: #AFCAFFFF;
    --surface-accent-secondary: #718096FF;
    --surface-background: #0B0B0B;
    --surface-background-darker: #1B1B1B;
    --surface-latest-post: #1B1B1B;
    --surface-badge-primary: #EDF2F7FF;
    --surface-badge-related: #E2E8F029;
    --surface-button-fill-default: #E8E8F7FF;
    --surface-button-fill-disabled: #48485BFF;
    --surface-button-fill-focused: #E8E8F7FF;
    --surface-button-fill-hover: #A4A4EAFF;
    --surface-button-fill-pressed: #9090E0FF;
    --surface-button-fill-invert: #FFFFFF;
    --surface--button-fill-invert-hover: #0C0C4F;
    --surface-button-ghost-default: #FFFFFF00;
    --surface-button-ghost-disabled: #FFFFFF00;
    --surface-button-ghost-focused: #FFFFFF00;
    --surface-button-ghost-hover: #D0D0E011;
    --surface-button-ghost-pressed: #DEDEF11E;
    --surface-button-modal-close: #FFFFFF0F;
    --surface-button-outline-default: transparent;
    --surface-button-outline-disabled: #FFFFFF00;
    --surface-button-outline-focused: #FFFFFF00;
    --surface-button-outline-hover: #DEDEF614;
    --surface-button-outline-pressed: #DEDEF11E;
    --surface-button-rounded-default: #D0D0E011;
    --surface-button-rounded-disabled: #DEDEF105;
    --surface-button-rounded-pressed: #DEDEF11E;
    --surface-button-show-more-focused: #000000;
    --surface-button-nav: #FFFFFF;
    --surface-card: #1B1B1B;
    --surface-card-2: #313131;
    --surface-card-d: #121212;
    --surface-chip-active: #E8E8F7FF;
    --surface-chip-default: #1B1B1BFF;
    --surface-chip-focused: #A4A4EAFF;
    --surface-chip-hover: #363636FF;
    --surface-icon-sn: #FFFFFF;
    --surface-hover: #0B0B0BFF;
    --surface-icon: #FFFFFF;
    --surface-input: #1A202C;
    --surface-modal: #1B1B1B;
    --surface-filter-button: #1B1B1B;
    --surface-filter-button-hover: #363636;
    --surface-filter-button-active: #9EBEFF;
    --surface-filter-button-active-hover: #B2CDFF;
    --surface-open-filters-button-filled: #FFFFFF;
    --surface-open-filters-button-v2: #0B0B0B;
    --surface-button-content-type-filter: #1B1B1B;
    --surface-button-content-type-filter-hover: #1B1B1B;
    --surface-button-content-type-filter-active: #70AAFF;
    --surface-button-content-type-filter-active-hover: #70AAFF;
    --surface-slider-dot: #718096;
    --surface-slider-dot-active: #FFFFFF;
    --surface-pack: #3C3C3C99;
    --surface-tag: #363636;

    --text-badge-blogpost: #6B7280FF;
    --text-button-disabled: #908E96FF;
    --text-button-fill: #16161DFF;
    --text-button-fill-invert: #0C0C4F;
    --text-button-fill-invert-hover: #FFFFFF;
    --text-button-ghost: #CCCCCCFF;
    --text-button-gradient: #0C0C4F;
    --text-button-modal-close: #CCCCCC;
    --text-button-outline: #E8E8F7FF;
    --text-button-outline-hover: #AFCAFF;
    --text-button-show-more-hover: #AFCAFF;
    --text-button-show-more-focused: #858585;
    --text-label: #EDF2F7;
    --text-label-2: #FFFFFF;
    --text-link: #5C94FFFF;
    --text-primary: #FFFFFFFF;
    --text-primary-inverted: #0C0C4FFF;
    --text-required: #FC8181;
    --text-secondary: #CCCCCCFF;
    --text-secondary-hover: #AFCAFFFF;
    --text-subtitle: #CCCCCC;
    --text-main-menu: #FFFFFFFF;
    --text-menu-focus: #121212;
    --bg-menu-inner: #121212;
    --bg-menu-button: #AFCAFF;
    --icon-color: #FFFFFFFF;
    --icon-grant: #FFFFFF;
    --text-btn-filter: #CCCCCC;
    --text-tab: #7E7E7E;
    --text-tab-active: #FFFFFF;
    --text-filter-button: #CCCCCC;
    --text-filter-button-hover: #CCCCCC;
    --text-filter-button-active: #121212;
    --text-filter-button-active-hover: #0B0B0B;
    --text-filter-button-v2: #7E7E7E;
    --text-filter-button-v2-hover: #CCCCCC;
    --text-filter-button-v2-active: #FFFFFF;
    --text-open-filters-button: #FFFFFF;
    --text-open-filters-button-filled: #363636;
    --text-open-filters-button-v2: #FFFFFF;
    --text-date-related: #CBD5E0;
    --text-button-content-type-filter: #FFFFFF;
    --text-button-content-type-filter-hover: #FFFFFF;
    --text-button-content-type-active-filter: #1B1B1B;
    --text-button-content-type-filter-active-hover: #1B1B1B;
    --text-more-link: #FFFFFF;
    --text-slider-nav: #FFFFFF;
    --text-nav-arrow: #FFFFFF;
    --bg-banner: #A4A4EA;
    --wallets-badge : #A4A4EA;

    /*** GRADIENTS, SHADOWS ***/
    --surface-button-gradient-default-a: #9090E0;
    --surface-button-gradient-default-b: #A4A4EA;
    --surface-button-gradient-default-c: #FEAEA4;
    --surface-button-gradient-hover-a: #B7B7F5;
    --surface-button-gradient-hover-b: #C7C7F9;
    --surface-button-gradient-hover-c: #FFDBD6;
    --surface-card-img-a: #252525;
    --surface-card-img-b: #000000;
    --surface-hp-hero-section: linear-gradient(0.68deg, #3F1838 0%, #110751 44.39%, #171B31 100%);
    --surface-dapp-hero-section: linear-gradient(260.88deg, #50465C 4.97%, #171B31 101.57%);
    --surface-wallets-hero-section: linear-gradient(260.88deg, #3C3224 4.97%, #171B31 101.57%);
    --surface-bridges-onramps-hero-section: linear-gradient(260.88deg, #3E4E5B 4.97%, #171B31 101.57%);
    --surface-block-explorers-hero-section: linear-gradient(260.88deg, #364B4E 4.97%, #171B31 101.57%);
    --surface-fullnodes-hero-section: linear-gradient(264.75deg, #664E79 41.74%, #1B1729 161.19%);
    --surface-security-and-audits-hero-section: linear-gradient(266.1deg, #143B75 0%, #0E1134 97.67%);
    --surface-dev-hub-hero-section: linear-gradient(260.88deg, #63494B 4.97%, #171B31 101.57%);
    --surface-explore-hero-section: linear-gradient(258.76deg, #364B4E 3.96%, #171B31 254.34%);
    --surface-roadmap-hero-section: linear-gradient(259.71deg, #414548 2.88%, #1C1D24 96.77%);
    --surface-grant-program-hero-section: linear-gradient(258.76deg, #CDCDE8, #DEFAFF);
    --surface-snips-hero-section: linear-gradient(260.88deg, #364B4E 4.97%, #171B31 101.57%);

    --cro-gradient-orange: linear-gradient(260.88deg, #2B1F20 4.97%, #191E34 101.57%);
    --cro-gradient-green: linear-gradient(260.88deg, #29343C 4.97%, #191E34 101.57%);
    --cro-gradient-yellow: linear-gradient(260.88deg, #31291E 4.97%, #191E34 101.57%);
    --cro-gradient-pink: linear-gradient(260.88deg, #201C26 4.97%, #191E34 101.57%);

    --text-color-rgb: rgba(255, 255, 255);
    --primary-color-rgb: rgba(175, 202, 255);
    --muted-color-rgb: rgba(204, 204, 204);
    --input-background-color-rgb: rgba(27, 27, 27);
    --background-color-rgb: rgba(27, 27, 27);
    --selected-text-color-rgb: rgba(11, 11, 11);
    --selected-color-rgb: var(--primary-color-rgb);
    --selected-color-alpha: 1;
    --description-highlight-background-color-rgb: rgba(0 255 255);
    --description-highlight-background-color-alpha: 0.25;
    --icon-color-rgb: rgba(255, 255, 255);
    --panel-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 1px 47px -3px rgba(0, 0, 0, 0.15), 0px 12px 22px -2px rgba(0, 0, 0, 0.68);
    --scrollbar-track-background-color-rgb: rgba(44, 46, 64);
    --scrollbar-thumb-background-color-rgb: var(--background-color-rgb);
    --panel-border-color-rgb: rgba(49, 49, 49);
    --mark-underline-color: rgba(255, 255, 255);
    --item-background-rgb: rgba(30, 29, 29);
}


@media (min-width: 768px){
    :root {
        --cro-inner-bg-lines: url("/wp-content/themes/Starknet/assets/img/lines-bg.png") no-repeat;
    }
}