:root {
    --color-main-orange: rgba(255, 168, 0, 1);
    --color-main-orange-filter: brightness(0) saturate(100%) invert(74%) sepia(32%) saturate(5694%) hue-rotate(0deg) brightness(105%) contrast(103%);
    --color-lightblue: rgba(226, 229, 252, 1);
    --color-lightblue-fade: rgba(226, 229, 252, 0.6);
    --color-lightblue-weak: rgba(226, 229, 252, 0.2) ;

    --color-accent: var(--color-main-orange);
    --color-accent-filter: var(--color-main-orange-filter);
    --color-accent-blend: rgba(255, 168, 0, 0.8);
    --color-accent-bright: rgba(255, 222, 191, 1);
    --color-accent-obscure: rgba(255, 168, 0, 0.20);

    --color-secondary: var(--color-lightblue);
    --color-secondary-blend: var(--color-lightblue-fade);


    --color-darkgray: #4A4853;
    --color-almost-black: #1F1D23;

    --color-graphite-900: #45404E;
    --color-graphite-800: #393641;
    --color-grayviolet-600: #656271;
    --color-grayviolet-500: #777485;


    --gradient-radial-accent: radial-gradient(50% 50% at 50% 50%, rgba(255, 168, 0, 0.10) 0%, rgba(255, 168, 0, 0.03) 100%);
    /*--gradient-global-background: radial-gradient(*/
    /*        83.42% 67.74% at 66.11% 54.82%,*/
    /*        rgba(20, 17, 25, 0.80) 30.97%,*/
    /*        rgba(0, 0, 0, 0.00) 100%*/
    /*), radial-gradient(*/
    /*        134.3% 70.24% at 47.49% 30.82%,*/
    /*        rgba(19, 16, 24, 0.00) 0%, #131018 75.22%*/
    /*);*/
    --gradient-global-background: radial-gradient(83.42% 67.74% at 66.11% 54.82%, rgb(0 0 0 / 89%) 30.97%, rgba(0, 0, 0, 0.00) 100%), radial-gradient(134.3% 70.24% at 47.49% 30.82%, rgba(19, 16, 24, 0.00) 0%, #131018 75.22%);
    --gradient-light: linear-gradient(220deg, #E2E5FC 28.79%, rgba(226, 229, 252, 0.00) 95.45%);
    --gradient-accent: linear-gradient(to right, #FFA800 0%, #FFDEBF 100%);

    --colors-scroll: #4A4853 #1F1D23;

    --scroll-thumb-color: var(--color-darkgray, #4A4853);
    --scroll-thumb-hover-color: var(--color-grayviolet-600, #656271);
    --scroll-thumb-active-color: var(--color-grayviolet-500, #777485);
    --scroll-track-color: var(--color-almost-black, #1F1D23);
    --scroll-track-hover-color: var(--color-graphite-900, #45404E);
    --scroll-track-active-color: var(--color-graphite-800, #393641);

    --tabs-control-animation-duration: .25s;

    --tabs-duration: 280ms;
    --tabs-ease: cubic-bezier(.22,.61,.36,1);
    --tabs-accent-bg: rgba(255,168,0,.20);
    --tabs-accent-border: rgba(255,168,0,.30);
    --tabs-radius: 40px;
    /* popup-dialog form hooks */
    --popup-form-margin: 0;
    --popup-form-padding: 0;
    --popup-form-radius: 0;

    /* tooltip defaults */
    --tooltip-bg: rgba(0,0,0,.8);
    --tooltip-color: rgba(255, 255, 255, 1);
    --tooltip-padding: 8px 10px;
    --tooltip-radius: 8px;
    --tooltip-shadow: 0 8px 24px rgba(0,0,0,.25);

    /* input defaults */
    --input-font-size: 1.6rem;
    --input-padding: 25px 20px 5px 20px;
    --input-radius: 10px;
    --input-border-color: rgba(226, 229, 252, 0.50);
    --input-bg: rgba(226, 229, 252, 0.10);
    --input-color: var(--color-lightblue);
    /* common radii */
    --button-radius: 7px;
    --radius-m: 10px;
    --radius-l: 20px;
    --radius-xl: 30px;
    --radius-xxl: 50px;

    /* spacing */
    --gap-s: 5px;
    --gap-m: 10px;
    --gap-l: 20px;
    --gap-xl: 30px;
}