:root {
  --saffron-50: #FFF4EA;
  --saffron-100: #FFDDBE;
  --saffron-200: #FFCD9E;
  --saffron-300: #FFB672;
  --saffron-400: #FFA857;
  --saffron-500: #FF922D;
  --saffron-600: #E88529;
  --saffron-700: #B56820;
  --saffron-800: #8C5019;
  --saffron-900: #6B3D13;

  --white: #FFFFFF;
  --black: #000000;

  --grey-50: #F5F5F5;
  --grey-100: #E5E5E5;
  --grey-200: #B0B1B3;
  --grey-300: #8C8E90;
  --grey-400: #76787B;
  --grey-500: #54565A;
  --grey-600: #4C4E52;
  --grey-700: #3C3D40;
  --grey-800: #2E2F32;
  --grey-900: #232426;

  --red-50: #FEEBEF;
  --red-100: #FCC1CC;
  --red-200: #FAA3B4;
  --red-300: #F87892;
  --red-400: #F75E7D;
  --red-500: #F5365C;
  --red-600: #DF3154;
  --red-700: #AE2641;
  --red-800: #871E33;
  --red-900: #671727;

  --orange-50: #FFF1E6;
  --orange-100: #FFD4B0;
  --orange-200: #FFBF8A;
  --orange-300: #FFA154;
  --orange-400: #FF8F33;
  --orange-500: #FF7300;
  --orange-600: #E86900;
  --orange-700: #B55200;
  --orange-800: #8C3F00;
  --orange-900: #6B3000;

  --green-50: #EAFAF3;
  --green-100: #BEF0DA;
  --green-200: #9EE8C9;
  --green-300: #72DEB0;
  --green-400: #57D8A1;
  --green-500: #2DCE89;
  --green-600: #29BB7D;
  --green-700: #209261;
  --green-800: #19714B;
  --green-900: #13573A;
}
@media (prefers-color-scheme: light) {
  :root {
    --brand-primary: var(--saffron-500);
    --brand-secondary: var(--grey-500);

    --logo-fill: var(--grey-500);
    --logo-fill-slash: var(--saffron-500);

    --bg-base: var(--grey-50);
    --bg-accent: var(--white);
    --bg-primary: var(--saffron-500);
    --bg-primary-soft: var(--saffron-200);
    --bg-primary-softer: var(--saffron-100);
    --bg-grey-soft: var(--grey-100);
    --bg-grey-softer: var(--grey-50);
    --bg-error-soft: var(--red-200);
    --bg-warning-soft: var(--orange-200);
    --bg-success-soft: var(--green-200);

    --fg-base: var(--grey-500);
    --fg-accent: var(--grey-900);
    --fg-brand: var(--saffron-500);
    --fg-primary: var(--saffron-500);
    --fg-secondary: var(--grey-500);
    --fg-soft: var(--grey-400);
    --fg-softer: var(--grey-300);
    --fg-inverse: var(--white);
    --fg-error: var(--red-500);
    --fg-warning: var(--orange-500);
    --fg-success: var(--green-500);
    --fg-disabled: var(--grey--200);

    --hr-wellcome: var(--grey-100);

    --ol--focus: var(--black);

    --bg-button-primary-filled: var(--saffron-500);
    --fg-button-primary-filled: var(--white);
    --bd-button-primary-filled: var(--saffron-500);
    --bg-button-primary-filled--hover: var(--saffron-600);
    --fg-button-primary-filled--hover: var(--white);
    --bd-button-primary-filled--hover: var(--saffron-600);
    --bg-button-primary-filled--focus: var(--saffron-500);
    --fg-button-primary-filled--focus: var(--white);
    --bd-button-primary-filled--focus: var(--saffron-500);
    --ol-button-primary-filled--focus: var(--black);

    --bg-button-primary-outlined: transparent;
    --fg-button-primary-outlined: var(--saffron-500);
    --bd-button-primary-outlined: var(--saffron-500);
    --bg-button-primary-outlined--hover: var(--saffron-100);
    --fg-button-primary-outlined--hover: var(--saffron-600);
    --bd-button-primary-outlined--hover: var(--saffron-600);
    --bg-button-primary-outlined--focus: transparent;
    --fg-button-primary-outlined--focus: var(--saffron-500);
    --bd-button-primary-outlined--focus: var(--saffron-500);
    --ol-button-primary-outlined--focus: var(--black);

    --bg-button-primary-ghost: transparent;
    --fg-button-primary-ghost: var(--saffron-500);
    --bd-button-primary-ghost: transparent;
    --bg-button-primary-ghost--hover: var(--saffron-100);
    --fg-button-primary-ghost--hover: var(--saffron-500);
    --bd-button-primary-ghost--hover: var(--saffron-100);
    --bg-button-primary-ghost--focus: var(--saffron-100);
    --fg-button-primary-ghost--focus: var(--saffron-500);
    --bd-button-primary-ghost--focus: var(--saffron-100);
    --ol-button-primary-ghost--focus: var(--black);

    --fg-badge-primary: var(--grey-500);
    --bt-badge-primary: var(--grey-500);
    --bg-badge-primary: transparent;
    --bd-badge-primary: var(--saffron-200);
    --fg-badge-primary--hover: var(--grey-500);
    --bt-badge-primary--hover: var(--saffron-500);
    --bg-badge-primary--hover: transparent;
    --bd-badge-primary--hover: var(--saffron-500);
    
    --fg-badge-success: var(--grey-500);
    --bt-badge-success: var(--grey-500);
    --bg-badge-success: transparent;
    --bd-badge-success: var(--green-200);
    --fg-badge-success--hover: var(--grey-500);
    --bt-badge-success--hover: var(--green-500);
    --bg-badge-success--hover: transparent;
    --bd-badge-success--hover: var(--green-500);
    
    --fg-badge-warning: var(--grey-500);
    --bt-badge-warning: var(--grey-500);
    --bg-badge-warning: transparent;
    --bd-badge-warning: var(--orange-200);
    --fg-badge-warning--hover: var(--grey-500);
    --bt-badge-warning--hover: var(--orange-500);
    --bg-badge-warning--hover: transparent;
    --bd-badge-warning--hover: var(--orange-500);
    
    --fg-badge-error: var(--grey-500);
    --bt-badge-error: var(--grey-500);
    --bg-badge-error: transparent;
    --bd-badge-error: var(--red-200);
    --fg-badge-error--hover: var(--grey-500);
    --bt-badge-error--hover: var(--red-500);
    --bg-badge-error--hover: transparent;
    --bd-badge-error--hover: var(--red-500);

    --bg-sidebar: var(--white);
    --bd-sidebar: var(--saffron-500);

    --bg-navitem: transparent;
    --fg-navitem: var(--grey-500);
    --bg-navitem--hover: var(--saffron-100);
    --fg-navitem--hover: var(--grey-900);
    --bg-navitem--selected: var(--saffron-100);
    --fg-navitem--selected: var(--grey-900);

    --bd-submenu: var(--grey-300);

    --bg-avatar: var(--saffron-50);
    --fg-avatar: var(--saffron-500);
    --bg-avatar--hover: var(--saffron-500);
    --fg-avatar--hover: var(--white);
    --bg-avatar--focus: var(--saffron-600);
    --fg-avatar--focus: var(--saffron-50);
    --ol-avatar--focus: var(--black);

    --bg-control-filled: var(--grey-100);
    --fg-control-filled: var(--grey-500);
    --bd-control-filled: var(--grey-100);
    --fg-control--error: var(--red-500);
    --bd-control--error: var(--red-500);
    --ol-control--focus: var(--black);

    --bg-option--hover: var(--saffron-200);
    --fg-option--hover: var(--grey-800);
    --bg-option--active: var(--saffron-500);
    --fg-option--active: var(--white);

    --bg-check: var(--grey-100);
    --fg-check: var(--grey-100);
    --bd-check: var(--grey-100);
    --bg-check--checked: var(--saffron-500);
    --fg-check--checked: var(--white);
    --bd-check--checked: var(--saffron-500);
    --bg-check--error: var(--white);

    --bg-radio: var(--grey-100);
    --dot-radio: var(--grey-100);
    --bd-radio: var(--grey-100);
    --bg-radio--checked: var(--white);
    --dot-radio--checked: var(--saffron-500);
    --bd-radio--checked: var(--saffron-500);
    --bg-radio--error: var(--white);

    --bg-switch: var(--grey-100);
    --dot-switch: var(--white);
    --bd-switch: var(--grey-100);
    --bg-switch--checked: var(--saffron-500);
    --dot-switch--checked: var(--white);
    --bd-switch--checked: var(--saffron-500);

    --hr-line: var(--grey-100);

    --bg-table-heading: var(--grey-50);
    --fg-table-heading: var(--grey-500);
    --bd-table-heading: var(--grey-100);
    --bg-table-body: var(--white);
    --fg-table-body: var(--grey-500);
    --bd-table-body: var(--grey-100);
    --bg-table-row--hover: var(--saffron-50);

    --bg-tooltip: var(--grey-900);
    --fg-tooltip: var(--white);

    --bg-datepicker: var(--white);
    --bd-datepicker: var(--grey-100);
    --sh-datepicker: 0px 0px 0px 4px rgba(0, 0, 0, 0.05);
    --fg-datepicker-dayweek: var(--grey-500);
    --bg-datepicker-day: var(--white);
    --bd-datepicker-day: var(--white);
    --fg-datepicker-day: var(--grey-500);
    --bg-datepicker-day--today: var(--grey-100);
    --bd-datepicker-day--today: var(--grey-100);
    --fg-datepicker-day--today: var(--grey-500);
    --bg-datepicker-day--hover: var(--grey-50);
    --bd-datepicker-day--hover: var(--grey-50);
    --fg-datepicker-day--hover: var(--grey-900);
    --bg-datepicker-day--inrange: var(--saffron-100);
    --bd-datepicker-day--inrange: var(--saffron-100);
    --fg-datepicker-day--inrange: var(--grey-900);
    --fg-datepicker-day--inrange--hover: var(--saffron-700);
    --bg-datepicker-day--range: var(--saffron-300);
    --bd-datepicker-day--range: var(--saffron-300);
    --fg-datepicker-day--range: var(--grey-900);
    --bg-datepicker-day--selected: var(--saffron-300);
    --bd-datepicker-day--selected: var(--saffron-300);
    --fg-datepicker-day--selected: var(--grey-900);
    --fg-datepicker-day--selected--hover: var(--saffron-300);

    --bg-modal: var(--white);
    --bd-modal: var(--grey-200);
    --fg-modal-close: var(--grey-300);
    --fg-modal-close--hover: var(--saffron-500);
  }
}
body.light-mode {
  --brand-primary: var(--saffron-500);
  --brand-secondary: var(--grey-500);

  --logo-fill: var(--grey-500);
  --logo-fill-slash: var(--saffron-500);

  --bg-base: var(--grey-50);
  --bg-accent: var(--white);
  --bg-primary: var(--saffron-500);
  --bg-primary-soft: var(--saffron-200);
  --bg-primary-softer: var(--saffron-100);
  --bg-grey-soft: var(--grey-100);
  --bg-grey-softer: var(--grey-50);
  --bg-error-soft: var(--red-200);
  --bg-warning-soft: var(--orange-200);
  --bg-success-soft: var(--green-200);

  --fg-base: var(--grey-500);
  --fg-accent: var(--grey-900);
  --fg-brand: var(--saffron-500);
  --fg-primary: var(--saffron-500);
  --fg-secondary: var(--grey-500);
  --fg-soft: var(--grey-400);
  --fg-softer: var(--grey-300);
  --fg-inverse: var(--white);
  --fg-error: var(--red-500);
  --fg-warning: var(--orange-500);
  --fg-success: var(--green-500);
  --fg-disabled: var(--grey--200);

  --hr-wellcome: var(--grey-300);

  --ol--focus: var(--black);

  --bg-button-primary-filled: var(--saffron-500);
  --fg-button-primary-filled: var(--white);
  --bd-button-primary-filled: var(--saffron-500);
  --bg-button-primary-filled--hover: var(--saffron-600);
  --fg-button-primary-filled--hover: var(--white);
  --bd-button-primary-filled--hover: var(--saffron-600);
  --bg-button-primary-filled--focus: var(--saffron-500);
  --fg-button-primary-filled--focus: var(--white);
  --bd-button-primary-filled--focus: var(--saffron-500);
  --ol-button-primary-filled--focus: var(--black);

  --bg-button-primary-outlined: transparent;
  --fg-button-primary-outlined: var(--saffron-500);
  --bd-button-primary-outlined: var(--saffron-500);
  --bg-button-primary-outlined--hover: var(--saffron-100);
  --fg-button-primary-outlined--hover: var(--saffron-600);
  --bd-button-primary-outlined--hover: var(--saffron-600);
  --bg-button-primary-outlined--focus: transparent;
  --fg-button-primary-outlined--focus: var(--saffron-500);
  --bd-button-primary-outlined--focus: var(--saffron-500);
  --ol-button-primary-outlined--focus: var(--black);

  --bg-button-primary-ghost: transparent;
  --fg-button-primary-ghost: var(--saffron-500);
  --bd-button-primary-ghost: transparent;
  --bg-button-primary-ghost--hover: var(--saffron-100);
  --fg-button-primary-ghost--hover: var(--saffron-500);
  --bd-button-primary-ghost--hover: var(--saffron-100);
  --bg-button-primary-ghost--focus: var(--saffron-100);
  --fg-button-primary-ghost--focus: var(--saffron-500);
  --bd-button-primary-ghost--focus: var(--saffron-100);
  --ol-button-primary-ghost--focus: var(--black);

  --fg-badge-primary: var(--grey-500);
  --bt-badge-primary: var(--grey-500);
  --bg-badge-primary: transparent;
  --bd-badge-primary: var(--saffron-200);
  --fg-badge-primary--hover: var(--grey-500);
  --bt-badge-primary--hover: var(--saffron-500);
  --bg-badge-primary--hover: transparent;
  --bd-badge-primary--hover: var(--saffron-500);
    
  --fg-badge-success: var(--grey-500);
  --bt-badge-success: var(--grey-500);
  --bg-badge-success: transparent;
  --bd-badge-success: var(--green-200);
  --fg-badge-success--hover: var(--grey-500);
  --bt-badge-success--hover: var(--green-500);
  --bg-badge-success--hover: transparent;
  --bd-badge-success--hover: var(--green-500);
  
  --fg-badge-warning: var(--grey-500);
  --bt-badge-warning: var(--grey-500);
  --bg-badge-warning: transparent;
  --bd-badge-warning: var(--orange-200);
  --fg-badge-warning--hover: var(--grey-500);
  --bt-badge-warning--hover: var(--orange-500);
  --bg-badge-warning--hover: transparent;
  --bd-badge-warning--hover: var(--orange-500);
  
  --fg-badge-error: var(--grey-500);
  --bt-badge-error: var(--grey-500);
  --bg-badge-error: transparent;
  --bd-badge-error: var(--red-200);
  --fg-badge-error--hover: var(--grey-500);
  --bt-badge-error--hover: var(--red-500);
  --bg-badge-error--hover: transparent;
  --bd-badge-error--hover: var(--red-500);

  --bg-sidebar: var(--white);
  --bd-sidebar: var(--saffron-500);

  --bg-navitem: transparent;
  --fg-navitem: var(--grey-500);
  --bg-navitem--hover: var(--saffron-100);
  --fg-navitem--hover: var(--grey-900);
  --bg-navitem--selected: var(--saffron-100);
  --fg-navitem--selected: var(--grey-900);
  
  --bd-submenu: var(--grey-100);

  --bg-avatar: var(--saffron-50);
  --fg-avatar: var(--saffron-500);
  --bg-avatar--hover: var(--saffron-500);
  --fg-avatar--hover: var(--white);
  --bg-avatar--focus: var(--saffron-600);
  --fg-avatar--focus: var(--saffron-50);
  --ol-avatar--focus: var(--black);

  --bg-control-filled: var(--grey-100);
  --fg-control-filled: var(--grey-500);
  --bd-control-filled: var(--grey-100);
  --fg-control--error: var(--red-500);
  --bd-control--error: var(--red-500);
  --ol-control--focus: var(--black);

  --bg-option--hover: var(--saffron-200);
  --fg-option--hover: var(--grey-800);
  --bg-option--active: var(--saffron-500);
  --fg-option--active: var(--white);

  --bg-check: var(--grey-100);
  --fg-check: var(--grey-100);
  --bd-check: var(--grey-100);
  --bg-check--checked: var(--saffron-500);
  --fg-check--checked: var(--white);
  --bd-check--checked: var(--saffron-500);
  --bg-check--error: var(--white);

  --bg-radio: var(--grey-100);
  --dot-radio: var(--grey-100);
  --bd-radio: var(--grey-100);
  --bg-radio--checked: var(--white);
  --dot-radio--checked: var(--saffron-500);
  --bd-radio--checked: var(--saffron-500);
  --bg-radio--error: var(--white);

  --bg-switch: var(--grey-100);
  --dot-switch: var(--white);
  --bd-switch: var(--grey-100);
  --bg-switch--checked: var(--saffron-500);
  --dot-switch--checked: var(--white);
  --bd-switch--checked: var(--saffron-500);

  --hr-line: var(--grey-100);

  --bg-table-heading: var(--grey-50);
  --fg-table-heading: var(--grey-500);
  --bd-table-heading: var(--grey-100);
  --bg-table-body: var(--white);
  --fg-table-body: var(--grey-500);
  --bd-table-body: var(--grey-100);
  --bg-table-row--hover: var(--saffron-50);

  --bg-tooltip: var(--grey-900);
  --fg-tooltip: var(--white);

  --bg-datepicker: var(--white);
  --bd-datepicker: var(--grey-100);
  --sh-datepicker: 0px 0px 0px 4px rgba(0, 0, 0, 0.05);
  --fg-datepicker-dayweek: var(--grey-500);
  --bg-datepicker-day: var(--white);
  --bd-datepicker-day: var(--white);
  --fg-datepicker-day: var(--grey-500);
  --bg-datepicker-day--today: var(--grey-100);
  --bd-datepicker-day--today: var(--grey-100);
  --fg-datepicker-day--today: var(--grey-500);
  --bg-datepicker-day--hover: var(--grey-50);
  --bd-datepicker-day--hover: var(--grey-50);
  --fg-datepicker-day--hover: var(--grey-900);
  --bg-datepicker-day--inrange: var(--saffron-100);
  --bd-datepicker-day--inrange: var(--saffron-100);
  --fg-datepicker-day--inrange: var(--grey-900);
  --fg-datepicker-day--inrange--hover: var(--saffron-700);
  --bg-datepicker-day--range: var(--saffron-300);
  --bd-datepicker-day--range: var(--saffron-300);
  --fg-datepicker-day--range: var(--grey-900);
  --bg-datepicker-day--selected: var(--saffron-300);
  --bd-datepicker-day--selected: var(--saffron-300);
  --fg-datepicker-day--selected: var(--grey-900);
  --fg-datepicker-day--selected--hover: var(--saffron-300);

  --bg-modal: var(--white);
  --bd-modal: var(--grey-200);
  --fg-modal-close: var(--grey-300);
  --fg-modal-close--hover: var(--saffron-500);
}
@media (prefers-color-scheme: dark) {
  :root {      
    --brand-primary: var(--saffron-300);
    --brand-secondary: var(--white);

    --logo-fill: var(--white);
    --logo-fill-slash: var(--white);

    --bg-base: var(--grey-700);
    --bg-accent: var(--grey-900);
    --bg-primary: var(--saffron-500);
    --bg-primary-soft: var(--saffron-200);
    --bg-primary-softer: var(--saffron-900);
    --bg-grey-soft: var(--grey-900);
    --bg-grey-softer: var(--grey-900);
    --bg-error-soft: var(--red-200);
    --bg-warning-soft: var(--orange-200);
    --bg-success-soft: var(--green-200);

    --fg-base: var(--white);
    --fg-accent: var(--white);
    --fg-brand: var(--saffron-500);
    --fg-primary: var(--saffron-300);
    --fg-secondary: var(--white);
    --fg-soft: var(--grey-200);
    --fg-softer: var(--grey-200);
    --fg-inverse: var(--white);
    --fg-error: var(--red-300);
    --fg-warning: var(--orange-300);
    --fg-success: var(--green-300);
    --fg-disabled: var(--grey--700);

    --hr-wellcome: var(--grey-400);

    --ol--focus: var(--white);

    --bg-button-primary-filled: var(--saffron-300);
    --fg-button-primary-filled: var(--grey-900);
    --bd-button-primary-filled: var(--saffron-300);
    --bg-button-primary-filled--hover: var(--saffron-200);
    --fg-button-primary-filled--hover: var(--saffron-900);
    --bd-button-primary-filled--hover: var(--saffron-200);
    --bg-button-primary-filled--focus: var(--saffron-500);
    --fg-button-primary-filled--focus: var(--grey-900);
    --bd-button-primary-filled--focus: var(--saffron-500);
    --ol-button-primary-filled--focus: var(--white);

    --bg-button-primary-outlined: transparent;
    --fg-button-primary-outlined: var(--saffron-300);
    --bd-button-primary-outlined: var(--saffron-300);
    --bg-button-primary-outlined--hover: var(--saffron-100);
    --fg-button-primary-outlined--hover: var(--saffron-700);
    --bd-button-primary-outlined--hover: var(--saffron-700);
    --bg-button-primary-outlined--focus: transparent;
    --fg-button-primary-outlined--focus: var(--saffron-300);
    --bd-button-primary-outlined--focus: var(--saffron-300);
    --ol-button-primary-outlined--focus: var(--black);

    --bg-button-primary-ghost: transparent;
    --fg-button-primary-ghost: var(--saffron-300);
    --bd-button-primary-ghost: transparent;
    --bg-button-primary-ghost--hover: var(--saffron-700);
    --fg-button-primary-ghost--hover: var(--white);
    --bd-button-primary-ghost--hover: var(--saffron-700);
    --bg-button-primary-ghost--focus: var(--saffron-700);
    --fg-button-primary-ghost--focus: var(--white);
    --bd-button-primary-ghost--focus: var(--saffron-700);
    --ol-button-primary-ghost--focus: var(--white);

    --fg-badge-primary: var(--white);
    --bt-badge-primary: var(--white);
    --bg-badge-primary: transparent;
    --bd-badge-primary: var(--saffron-800);
    --fg-badge-primary--hover: var(--white);
    --bt-badge-primary--hover: var(--saffron-500);
    --bg-badge-primary--hover: transparent;
    --bd-badge-primary--hover: var(--saffron-500);
    
    --fg-badge-success: var(--white);
    --bt-badge-success: var(--white);
    --bg-badge-success: transparent;
    --bd-badge-success: var(--green-800);
    --fg-badge-success--hover: var(--white);
    --bt-badge-success--hover: var(--green-500);
    --bg-badge-success--hover: transparent;
    --bd-badge-success--hover: var(--green-500);
    
    --fg-badge-warning: var(--white);
    --bt-badge-warning: var(--white);
    --bg-badge-warning: transparent;
    --bd-badge-warning: var(--orange-800);
    --fg-badge-warning--hover: var(--white);
    --bt-badge-warning--hover: var(--orange-500);
    --bg-badge-warning--hover: transparent;
    --bd-badge-warning--hover: var(--orange-500);
    
    --fg-badge-error: var(--white);
    --bt-badge-error: var(--white);
    --bg-badge-error: transparent;
    --bd-badge-error: var(--red-800);
    --fg-badge-error--hover: var(--white);
    --bt-badge-error--hover: var(--red-500);
    --bg-badge-error--hover: transparent;
    --bd-badge-error--hover: var(--red-500);

    --bg-sidebar: var(--grey-800);
    --bd-sidebar: var(--saffron-500);

    --bg-navitem: transparent;
    --fg-navitem: var(--grey-50);
    --bg-navitem--hover: var(--saffron-700);
    --fg-navitem--hover: var(--white);
    --bg-navitem--selected: var(--saffron-700);
    --fg-navitem--selected: var(--white);

    --bd-submenu: var(--grey-400);

    --bg-avatar: var(--white);
    --fg-avatar: var(--saffron-500);
    --bg-avatar--hover: var(--white);
    --fg-avatar--hover: var(--saffron-300);
    --bg-avatar--focus: var(--saffron-300);
    --fg-avatar--focus: var(--saffron-800);
    --ol-avatar--focus: var(--white);

    --bg-control-filled: var(--grey-800);
    --fg-control-filled: var(--white);
    --bd-control-filled: var(--grey-800);
    --fg-control--error: var(--red-300);
    --bd-control--error: var(--red-300);
    --ol-control--focus: var(--white);

    --bg-option--hover: var(--grey-700);
    --fg-option--hover: var(--white);
    --bg-option--active: var(--saffron-300);
    --fg-option--active: var(--white);

    --bg-check: var(--grey-800);
    --fg-check: var(--grey-800);
    --bd-check: var(--grey-800);
    --bg-check--checked: var(--saffron-300);
    --fg-check--checked: var(--white);
    --bd-check--checked: var(--saffron-300);
    --bg-check--error: var(--white);

    --bg-radio: var(--grey-800);
    --dot-radio: var(--grey-800);
    --bd-radio: var(--grey-800);
    --bg-radio--checked: var(--white);
    --dot-radio--checked: var(--saffron-300);
    --bd-radio--checked: var(--saffron-300);
    --bg-radio--error: var(--white);

    --bg-switch: var(--grey-800);
    --dot-switch: var(--white);
    --bd-switch: var(--grey-800);
    --bg-switch--checked: var(--saffron-300);
    --dot-switch--checked: var(--white);
    --bd-switch--checked: var(--saffron-300);

    --hr-line: var(--grey-400);

    --bg-table-heading: var(--grey-800);
    --fg-table-heading: var(--white);
    --bd-table-heading: var(--grey-400);
    --bg-table-body: var(--grey-900);
    --fg-table-body: var(--white);
    --bd-table-body: var(--grey-400);
    --bg-table-row--hover: var(--saffron-900);

    --bg-tooltip: var(--white);
    --fg-tooltip: var(--grey-500);

    --bg-datepicker: var(--white);
    --bd-datepicker: var(--grey-100);
    --sh-datepicker: 0px 0px 0px 4px rgba(0, 0, 0, 0.05);
    --fg-datepicker-dayweek: var(--grey-500);
    --bg-datepicker-day: var(--white);
    --bd-datepicker-day: var(--white);
    --fg-datepicker-day: var(--grey-500);
    --bg-datepicker-day--today: var(--grey-100);
    --bd-datepicker-day--today: var(--grey-100);
    --fg-datepicker-day--today: var(--grey-500);
    --bg-datepicker-day--hover: var(--grey-50);
    --bd-datepicker-day--hover: var(--grey-50);
    --fg-datepicker-day--hover: var(--grey-900);
    --bg-datepicker-day--inrange: var(--saffron-100);
    --bd-datepicker-day--inrange: var(--saffron-100);
    --fg-datepicker-day--inrange: var(--grey-900);
    --fg-datepicker-day--inrange--hover: var(--saffron-700);
    --bg-datepicker-day--range: var(--saffron-300);
    --bd-datepicker-day--range: var(--saffron-300);
    --fg-datepicker-day--range: var(--grey-900);
    --bg-datepicker-day--selected: var(--saffron-300);
    --bd-datepicker-day--selected: var(--saffron-300);
    --fg-datepicker-day--selected: var(--grey-900);
    --fg-datepicker-day--selected--hover: var(--saffron-300);
    
    --bg-modal: var(--grey-900);
    --bd-modal: var(--grey-200);
    --fg-modal-close: var(--grey-100);
    --fg-modal-close--hover: var(--saffron-300);
  }
}
body.dark-mode {
  --brand-primary: var(--saffron-300);
  --brand-secondary: var(--white);

  --logo-fill: var(--white);
  --logo-fill-slash: var(--white);

  --bg-base: var(--grey-700);
  --bg-accent: var(--grey-900);
  --bg-primary: var(--saffron-500);
  --bg-primary-soft: var(--saffron-200);
  --bg-primary-softer: var(--saffron-900);
  --bg-grey-soft: var(--grey-900);
  --bg-grey-softer: var(--grey-900);
  --bg-error-soft: var(--red-200);
  --bg-warning-soft: var(--orange-200);
  --bg-success-soft: var(--green-200);

  --fg-base: var(--white);
  --fg-accent: var(--white);
  --fg-brand: var(--saffron-500);
  --fg-primary: var(--saffron-300);
  --fg-secondary: var(--white);
  --fg-soft: var(--grey-200);
  --fg-softer: var(--grey-200);
  --fg-inverse: var(--white);
  --fg-error: var(--red-300);
  --fg-warning: var(--orange-300);
  --fg-success: var(--green-300);
  --fg-disabled: var(--grey--700);

  --hr-wellcome: var(--grey-400);

  --ol--focus: var(--white);

  --bg-button-primary-filled: var(--saffron-300);
  --fg-button-primary-filled: var(--grey-900);
  --bd-button-primary-filled: var(--saffron-300);
  --bg-button-primary-filled--hover: var(--saffron-200);
  --fg-button-primary-filled--hover: var(--saffron-900);
  --bd-button-primary-filled--hover: var(--saffron-200);
  --bg-button-primary-filled--focus: var(--saffron-500);
  --fg-button-primary-filled--focus: var(--grey-900);
  --bd-button-primary-filled--focus: var(--saffron-500);
  --ol-button-primary-filled--focus: var(--white);

  --bg-button-primary-outlined: transparent;
  --fg-button-primary-outlined: var(--saffron-300);
  --bd-button-primary-outlined: var(--saffron-300);
  --bg-button-primary-outlined--hover: var(--saffron-100);
  --fg-button-primary-outlined--hover: var(--saffron-700);
  --bd-button-primary-outlined--hover: var(--saffron-700);
  --bg-button-primary-outlined--focus: transparent;
  --fg-button-primary-outlined--focus: var(--saffron-300);
  --bd-button-primary-outlined--focus: var(--saffron-300);
  --ol-button-primary-outlined--focus: var(--black);

  --bg-button-primary-ghost: transparent;
  --fg-button-primary-ghost: var(--saffron-300);
  --bd-button-primary-ghost: transparent;
  --bg-button-primary-ghost--hover: var(--saffron-700);
  --fg-button-primary-ghost--hover: var(--white);
  --bd-button-primary-ghost--hover: var(--saffron-700);
  --bg-button-primary-ghost--focus: var(--saffron-700);
  --fg-button-primary-ghost--focus: var(--white);
  --bd-button-primary-ghost--focus: var(--saffron-700);
  --ol-button-primary-ghost--focus: var(--white);

  --fg-badge-primary: var(--white);
  --bt-badge-primary: var(--white);
  --bg-badge-primary: transparent;
  --bd-badge-primary: var(--saffron-800);
  --fg-badge-primary--hover: var(--white);
  --bt-badge-primary--hover: var(--saffron-500);
  --bg-badge-primary--hover: transparent;
  --bd-badge-primary--hover: var(--saffron-500);
    
  --fg-badge-success: var(--white);
  --bt-badge-success: var(--white);
  --bg-badge-success: transparent;
  --bd-badge-success: var(--green-800);
  --fg-badge-success--hover: var(--white);
  --bt-badge-success--hover: var(--green-500);
  --bg-badge-success--hover: transparent;
  --bd-badge-success--hover: var(--green-500);
  
  --fg-badge-warning: var(--white);
  --bt-badge-warning: var(--white);
  --bg-badge-warning: transparent;
  --bd-badge-warning: var(--orange-800);
  --fg-badge-warning--hover: var(--white);
  --bt-badge-warning--hover: var(--orange-500);
  --bg-badge-warning--hover: transparent;
  --bd-badge-warning--hover: var(--orange-500);
  
  --fg-badge-error: var(--white);
  --bt-badge-error: var(--white);
  --bg-badge-error: transparent;
  --bd-badge-error: var(--red-800);
  --fg-badge-error--hover: var(--white);
  --bt-badge-error--hover: var(--red-500);
  --bg-badge-error--hover: transparent;
  --bd-badge-error--hover: var(--red-500);

  --bg-sidebar: var(--grey-800);
  --bd-sidebar: var(--saffron-500);

  --bg-navitem: transparent;
  --fg-navitem: var(--grey-50);
  --bg-navitem--hover: var(--saffron-700);
  --fg-navitem--hover: var(--white);
  --bg-navitem--selected: var(--saffron-700);
  --fg-navitem--selected: var(--white);

  --bd-submenu: var(--grey-400);

  --bg-avatar: var(--white);
  --fg-avatar: var(--saffron-500);
  --bg-avatar--hover: var(--white);
  --fg-avatar--hover: var(--saffron-300);
  --bg-avatar--focus: var(--saffron-300);
  --fg-avatar--focus: var(--saffron-800);
  --ol-avatar--focus: var(--white);

  --bg-control-filled: var(--grey-800);
  --fg-control-filled: var(--white);
  --bd-control-filled: var(--grey-80);
  --fg-control--error: var(--red-300);
  --bd-control--error: var(--red-300);
  --ol-control--focus: var(--white);

  --bg-option--hover: var(--grey-500);
  --fg-option--hover: var(--white);
  --bg-option--active: var(--saffron-300);
  --fg-option--active: var(--white);

  --bg-check: var(--grey-800);
  --fg-check: var(--grey-800);
  --bd-check: var(--grey-800);
  --bg-check--checked: var(--saffron-300);
  --fg-check--checked: var(--white);
  --bd-check--checked: var(--saffron-300);
  --bg-check--error: var(--white);

  --bg-radio: var(--grey-800);
  --dot-radio: var(--grey-800);
  --bd-radio: var(--grey-800);
  --bg-radio--checked: var(--white);
  --dot-radio--checked: var(--saffron-300);
  --bd-radio--checked: var(--saffron-300);
  --bg-radio--error: var(--white);

  --bg-switch: var(--grey-800);
  --dot-switch: var(--white);
  --bd-switch: var(--grey-800);
  --bg-switch--checked: var(--saffron-300);
  --dot-switch--checked: var(--white);
  --bd-switch--checked: var(--saffron-300);

  --hr-line: var(--grey-400);

  --bg-table-heading: var(--grey-800);
  --fg-table-heading: var(--white);
  --bd-table-heading: var(--grey-400);
  --bg-table-body: var(--grey-900);
  --fg-table-body: var(--white);
  --bd-table-body: var(--grey-400);
  --bg-table-row--hover: var(--saffron-900);

  --bg-tooltip: var(--white);
  --fg-tooltip: var(--grey-500);

  --bg-datepicker: var(--white);
  --bd-datepicker: var(--grey-100);
  --sh-datepicker: 0px 0px 0px 4px rgba(0, 0, 0, 0.05);
  --fg-datepicker-dayweek: var(--grey-500);
  --bg-datepicker-day: var(--white);
  --bd-datepicker-day: var(--white);
  --fg-datepicker-day: var(--grey-500);
  --bg-datepicker-day--today: var(--grey-100);
  --bd-datepicker-day--today: var(--grey-100);
  --fg-datepicker-day--today: var(--grey-500);
  --bg-datepicker-day--hover: var(--grey-50);
  --bd-datepicker-day--hover: var(--grey-50);
  --fg-datepicker-day--hover: var(--grey-900);
  --bg-datepicker-day--inrange: var(--saffron-100);
  --bd-datepicker-day--inrange: var(--saffron-100);
  --fg-datepicker-day--inrange: var(--grey-900);
  --fg-datepicker-day--inrange--hover: var(--saffron-700);
  --bg-datepicker-day--range: var(--saffron-300);
  --bd-datepicker-day--range: var(--saffron-300);
  --fg-datepicker-day--range: var(--grey-900);
  --bg-datepicker-day--selected: var(--saffron-300);
  --bd-datepicker-day--selected: var(--saffron-300);
  --fg-datepicker-day--selected: var(--grey-900);
  --fg-datepicker-day--selected--hover: var(--saffron-300);
  
  --bg-modal: var(--grey-900);
  --bd-modal: var(--grey-200);
  --fg-modal-close: var(--grey-100);
  --fg-modal-close--hover: var(--saffron-300);
}

.logo {
  fill: var(--logo-fill);
}
.logo-slash {
  fill: var(--logo-fill-slash);
}
.logo--inverse {
  fill: var(--white);
}