:root{
    --color-green-perso: #04fea0;

    --color-black: #0B1632;
    --color-white: #ffffff;

    --color-gray-200: #BCCAF0;
    --color-gray-100:  #BCCAF0;
    --color-gray-250:  #8BA3E5;
    --color-gray-300:  #7A95E1;
    --color-gray-400:  #597BD9;
    --color-gray-500: #3761D2;
    --color-gray-600: #224196;
    --color-gray-700:  #1A3274;
    --color-gray-800: #172C64;
    --color-gray-850:  #132553;
    --color-gray-900:  #0e1e43;
    --color-gray-950: #0d1a38;

    --button-cancel-filled-color-back: light-dark( var(--color-gray-300), var(--color-gray-950) );
    --color-icon-perso: light-dark( var(--color-gray-700), var(--color-gray-400) );

    --color-border: light-dark(var(--color-gray-300), var(--color-gray-600));
    --dropdown-color-hr:var(--color-gray-800);

    --color-focus: var(--color-green-perso);

    --color-red-h: 355;
    --color-green-h: 152;
    --color-orange-h: 15;
    --color-blue-h: 220;
}

.k-dialog-button-cancel:where([data-variant="filled"]) {
  --button-color-back: var(--button-cancel-filled-color-back);
}

.k-box {
  --icon-color: var(--color-icon-perso);
}

.k-panel-menu-button:hover:not(.k-activation-button):not(.k-panel-menu-search){
    color: var(--color-green-perso);
}