:root {
  
  --er-cl: #BE123C; /*Error color*/
  --er-on: #FFFFFF; /*On error color*/
  --er-cn: rgba(225, 29, 72, 0.15); /*Error container*/
  --er-oc: #FDA4AF; /*On error container*/
  
  --wr-cl: #F2B72F; /*Warning color*/
  --wr-on: #3E2E00; /*On warning color*/
  --wr-cn: #FFE08F; /*Warning container*/
  --wr-oc: #261900; /*On warning container*/
  
  --in-cl: #00D1FF; /*Info color*/
  --in-on: #003544; /*On info color*/
  --in-cn: #BBEBFF; /*Info container*/
  --in-oc: #001F29; /*On info container*/
  
  --sc-cl: #059669; /*Success color*/
  --sc-on: #FFFFFF; /*On success color*/
  --sc-cn: rgba(16, 185, 129, 0.15); /*Success container*/
  --sc-oc: #6EE7B7; /*On success container*/
  
  --en-cl: #10B981; /*Enable color*/
  --en-cn: #10B9811A;
  
  --br-rs: 4px;
  --br-rn: 8px;
  --br-rl: 12px;
  
  --br-sn: 1px;
  --br-db: 2px;
  
  --ic-ty: 10px;
  --ic-xs: 12px;
  --ic-sm: 16px;
  --ic-md: 20px;
  --ic-df: 24px;
  --ic-bg: 28px;
  --ic-lg: 32px;
  
  --fn-fm: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  
  --fn-ty: 10px;
  --fn-xs: 12px;
  --fn-sm: 14px;
  --fn-nm: 16px;
  --fn-bg: 20px;
  --fn-lg: 24px;
  
  --fv-cl: #F2B72F;
  
  /* Space Sizes */
  --sp-ty: 2px;
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 16px;
  --sp-lg: 24px;
  --sp-xl: 32px;
  --sp-hg: 40px;
  
  --ic-xl: 48px; /*Extra large icon*/
  --ic-hg: 56px; /*Huge icon container*/
  
  --tr-df: 0.2s ease-in-out;

  /* UI Component Dimensions */
  --lg-sz: 40px; /*Logo size*/
  --lbl-hz-wd: 160px; /*Horizontal label width*/
  --tab-mx-wd: 280px; /*Tab max width*/
  --mnu-mx-hg: 320px; /*Context menu max height*/
  --kbn-cl-wd: 264px; /*Kanban column width*/
  --prg-hg: 8px; /*Progress bar height*/
  --prc-dt-hg: 120px; /*Process details height*/
  --stp-ic-hf: 28px; /*Half step icon size*/
  --stp-sm-wd: 320px; /*Steps summary width*/
  --stp-vr-wd: 200px; /*Steps vertical width*/
}